Loading local files with Javascript without a web server
If you insist on using Chrome, it have some command line flags to allow access to/from local originated files (--allow-file-access-from-files
/ --disable-web-security
). Do note that you need to run entire browser from scratch with those flags - i.e. if there's already any other Chrome windows open flags WON'T have any effect and that effect persists across ALL windows until Chrome is closed, which is, obviously huge hole in security.
You can set up a lightweight local server if you pack your "application" with some kind of automated setup script. This is still not very good, because you'd need to install executable that user might not want or even be completely unable to install due to restrictions.
You can pack your HTML/JS-based app as Chrome extension - extensions have much wider permissions than random code, but then you'd need to either distribute it through Google Play or provide instructions to manually install extensions for your users.
And finally, you can format all the data, including your configuration and text files your mentioned as valid JavaScript code - i.e. pack a story1.txt
to story1.js
like:
var myapp.story1 = "Complete text of story1.txt"
and then just dynamically select stuff you need from corresponding vars or even use DOM manipulation to only load scripts you need through dynamically adding <script>
tags. In my opinion that would be best option because it is less intrusive: it doesn't requires any installation/reconfiguration, it just works out-of-box. CORS Error: “requests are only supported for protocol schemes: http…” etc
Any time you see that “only supported for protocol schemes” message, it almost certainly means you’ve just forgotten to put theXMLHttpRequest cannot load localhost:4201/ticker. Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https.
https
or http
on the request URL in your code.So in this case, the fix is to use the URL http://localhost:4201/ticker
in your code here:
this._baseUrl = 'http://localhost:4201/';
…because without the http://
there, localhost:4201/ticker
isn’t really the URL you intend. Load a JSON file without server
Unfortunately, both XHR and the Fetch API are inextricably tied to HTTP, and cannot be used to load a resource from a relative path unless an HTTP server is involved. If you're loading your page via a file:
URL, you won't be able to use XHR or Fetch to get that data.
There are only two methods available to you:
Switch to JavaScript instead of regular JSON and use a
<script>
tag (as previously suggested to you in another answer)Allow the user to drag/drop the JSON file (or use
<input type="file">
) to get a File reference that you can then load.
Load json file in local project without using webserver
As for JSON you can use JSONP, it's designed for cross-domain and for every url, absolute or relative.
https://www.w3schools.com/js/js_json_jsonp.asp and
http://api.jquery.com/jquery.getjson/
test.html
<script>
function jsonp(data){
console.log(data)
}
</script>
<script src="test.js"></script>
test.jsjsonp([{
name : "Google",
url : "https://www.google.com",
},
{
name : "Bing",
url : "https://www.bing.com",
}])
Loading an XML locally into JavaScript without having a web server available?
You can embed your xml inside script tag in your html like this:
console.log(document.getElementById('file').innerHTML)
<script type="text/xml" id="file"><root><foo><bar></bar></foo></root></script>
How to parse a JSON file without web request or web server?
Simple, fast, but bad for real project solution:
- Rename
myfile.json
todata.js
(name doesn't matter). - Create a variable in data.js and initialize it with your json
var myData = {...your json...}
- Add
<script src="./data.js"></script>
to your html file. - Now you can use
myData
variable from javascript with all data.
Also, If you want to make ajax requests to your local files, you can use http server. Take a look at very simple node js http-server.
Related Topics
Create an Array with Random Values
Serialize Object to Query String in JavaScript/Jquery
Clear JavaScript Console in Google Chrome
Explain +Var and -Var Unary Operator in JavaScript
How to Get Ssl Certificate Details Using JavaScript
JavaScript Contenteditable - Set Cursor/Caret to Index
How to Compare 2 Functions in JavaScript
Adding a Slide Effect to Bootstrap Dropdown
How to Set the Style -Webkit-Transform Dynamically Using JavaScript
What Exactly Can Cause an "Hierarchy_Request_Err: Dom Exception 3"-Error
What the Difference Between Loadcomplete and Gridcomplete Events
If (Key in Object) or If(Object.Hasownproperty(Key)
Problems with Circular Dependency and Oop in Angularjs
React-Router Getting This.Props.Location in Child Components