CODEWITHSUNDEEP
javascriptajax
BUKTOP
BUKTOP

Reputation: 971

Local javascript cannot open local file

Please tell me, why local javascript cannot open a local file? I'm trying to create a simple javascript/html app that shall run on the local machine from local filesystem. This app is trying to read the configuration file (json) using different methods, but gets the following errors (Chrome):

  1. In case of XMLHttpRequest, method open("GET", filename, true) throws an exception:

    XMLHttpRequest cannot load file:///bla-bla-bla. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

  2. In case of document.createElement("iframe").src=filename I have another exception:

    VM596:1 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a cross-origin frame."

  3. In case of var f=new File([], filename, { type: "text/plain" }); I've got the File object with the zero size and no errors at all. FileReader returns an empty result then.

So, my questions are: Why is it "cross-origin"? These files are stored in the same directory! And how could I open the local file from the same origin/directory I run the script? Please help.

P.S.: Yes, I know about --allow-file-access-from-files but I need to run this by customers.

Upvotes: 3

Views: 3428

Answers (3)

Florin Mircea
Florin Mircea

Reputation: 973

A little late for this party, but I had the same issue and this was how I got around the problem

Create a js template such as this:

template.js

(function(global, factory) {
    "use strict";
    factory(global);
})(typeof window !== "undefined" ? window : this, function(window) {
    "use strict";
    var myObjectJson = '<JSONREPLACE>';
    var myObject = JSON.parse(myObjectJson);
    window.myObject = myObject;
});

Then, have your json replace the tag either by your program that could generate the exported js itself, or create a batch script file that does that for you. I'm using C# so I just build the template directly from there. If the language you're working on is half-decent, you should be able to generate and export your file.

Make sure you use a minified json string.

Then you use your generated file just like you'd use jQuery

<script src="generated.js"></script>

and access your object with

window.myObject;

It's slightly more complicated to set-up, but once you do, you completely remove the cross-origin issue.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1073968

Why is it "cross-origin"? These files are stored in the same directory!

Because Chrome considers all file:// URLs to be cross-origin to each other.

And how could I open the local file from the same origin/directory I run the script?

From Chrome? You don't. Not unless you disable CORS entirely with a command-line option (which is a bad idea, as it's trivially easy to forget you've set that command-line option and go surf the web, leaving yourself wide open to exploits cashing in on the fact you've disabled web security).

Other browsers may treat origin null differently.

Instead, run a local web server and make the files available via the local web server. Then you can access them because it'll be a same-origin http URL, not a file URL. Or use any of the dozen or so frameworks that let you write apps in JavaScript (rather than using the browser). Or a simple NodeJS script serving the files (it's about 10 lines long). Etc.

Upvotes: 5

Roberto Russo
Roberto Russo

Reputation: 853

What you can do to read your .json file, is to declare it a .js.

data.js 

var data = `{"value1": 10, "value2": "hello"}`

index.html

<script src="data.js"></script>

<script>
  console.log(JSON.parse(data))
</script>

This will print 

Object {value1: 10, value2: "hello"}

Both of them have to be in the same directory, otherwise you've to change the import of data.js.

Upvotes: 1

Related Questions