Text File to Var in Chrome - Javascript

Question

Final product: take a file called theFile.txt which is saved with the js and HTML file and have it broken up by line into an array.

Problem: Works fine in Firefox but revives the following error in Google Chrome:

XMLHttpRequest cannot load file:///C:/Users/(my name)/Documents/testFile/theFile.txt. Received an invalid response. Origin 'null' is therefore not allowed access.

Javascript code:

$('#infoStore').load('theFile.txt', function(result) {
text = result;
console.log('here: '+text);});

HTML code for infoStore:

<div id="infoStore" hidden="true"></div>

Thank you in advance for your assistance. I will be online to answer questions often.

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

That's because Chrome treats all origins using the file: protocol as being different from each other, and so the Same Origin Policy comes into play. It's just a security choice distinction between Chrome and some other browsers.

You basically can't use ajax with local files served via the file: protocol. (In Chrome.)

You could read the file using the File API (this answer shows how), but of course that has limitations (not least that the user has to give you the file to read, either via <input type="file"> or drag and drop).

edited May 23 '17 at 11:57

Community

1
1

answered Aug 12 '14 at 13:55

T.J. Crowder

1,031,962
187
1,923
1,875

What would you suggest as a substitute? – Lucas Bullen Aug 12 '14 at 13:55
@user3605309: I've just added a suggestion. – T.J. Crowder Aug 12 '14 at 13:56
not what I wanted to hear, but thank you for the help. – Lucas Bullen Aug 12 '14 at 14:01

score 0 · Answer 2 · answered Aug 12 '14 at 13:55

0

This happens because of Same-Origin-Policy. You should load that file from webserver, not from local directory.

answered Aug 12 '14 at 13:55

antyrat

27,479
9
75
76

score 0 · Answer 3 · answered Aug 12 '14 at 14:00

If you want to access local file in chrome ?? Sometimes it’s cool to debug and test javascript applications in Chrome but you want to read / write to local files. Example: you’re looking to use ajax and do a $.getJSON(‘json/somefile.json’). Chrome by default won’t allow this and will throw an error similar to

Failed to load resource: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. 
Origin 'null' is therefore not allowed access.

Or
XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin' 
header is present on the requested resource. 
Origin 'null' is therefore not allowed access.

Chrome does have a switch to enable this, it’s quite easy to turn on. You’ll need to make sure Chrome is closed completely, and run chrome with the ‘–allow-file-access-from-files’ flag. Ie:

C:\Users\<user>\AppData\Local\Google\Chrome\Application>
chrome --allow-file-access-from-files

Or you should be able to run:

%localappdata%\google\chrome\application\chrome --allow-file-access-from-files

I’ve made the below into a .bat file I use, if you find it helps.

start "chrome" %localappdata%\google\chrome\application\chrome --allow-file-access-from-files
exit

To see if the flag is set, you can visit: chrome://version/ and look at the Command Line section and you should see –allow-file-access-from-files

You’ll most likely need to run this with at least admin access, and I would caution visiting unknown sites with this setting on, as they could capitalize on your setting and potentially read local files.

REF: Reference Link -Allow Local File Access in Chrome (Windows)

Thanks for the suggestion, unfortunately not too useful when trying to make a public website. — Lucas Bullen, Aug 12 '14 at 14:57
if you want to create website public then you should not call any file from your local pc.. — Anant Dabhi, Aug 13 '14 at 04:21
I am currently making the website, the files will be on the server once the site is live — Lucas Bullen, Aug 13 '14 at 13:15

Text File to Var in Chrome - Javascript

3 Answers3