Local javascript cannot open local file

Question

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.

Answer 1

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.

Answer 2

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.