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.
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).
This happens because of Same-Origin-Policy. You should load that file from webserver, not from local directory.
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)
Related
I tried loading Ace editor from an HTML file on my computer (using file:/// protocol) to edit JavaScript:
ace.edit("editor", {
"mode": "ace/mode/javascript",
})
However, CSP blocks a worker used by JSHint (which Ace implements by default). The following error is logged to the console:
Content Security Policy: The page’s settings blocked the loading of a resource at blob:null/[...] (“worker-src”).
When I set loadWorkerFromBlob to false:
ace.config.set("loadWorkerFromBlob", false)
A different error was generated:
Security Error: Content at file:///[...]/index.html may not load data from file:///[...]/ace/worker-javascript.js.
I tried to bypass CSP with <meta http-equiv="Content-Security-Policy"> but to no avail, and searching this problem yielded no results.
How can I use JSHint in Ace editor from a local HTML page?
Edit: Forgot to specify that this is only a problem with Firefox. The first example worked completely fine for me on Chromium.
The file:// URLs produce a null Origin, as you can see in your error message:
The page’s settings blocked the loading of a resource at blob:null/[...]
Therefore CORS doesn't support local file:// access, pls see here and here.
Also Chrome doesn't let you load web workers when running scripts from a local file.
The links above copntains some workarounds, but I think the best way is to run a local server to load workers via network schemes (http://localhost/...).
I have been searching for almost 2 hours to find a way to read a csv file that is hosted online. My data is hosted here.
I came across a library called papa parse. It apparently allows me to do that. I have the following code
Papa.parse("http://bahadorsaket.com/others/ranking.csv", {
download: true,
complete: function(results) {
console.log("Finished:", results.data);
}
})
It returns me following error: *
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
I was wondering if I am doing something wrong. OR there is a different way to load a csv file that is hosted online.
Thanks
There is chrome extension which can resolve this CORS error
Link :
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
Also you can start the chrome with below line which can also resolve it
chrome.exe --disable-web-security
This is for windows btw
Hope this helps
It is not that you are doing anything wrong, its that the remote URL doesnt allow cors and your browser will deny any traffic to remote origins. The safer option would be for you to make that call server side to get the csv and have papa.parse call a local endpoint.
I have two of the same site. My 1st site is http://educationaboveall.org/ and the 2nd is http://www.savantgenius.com .
1st site is loading properly on every device without any error but the 2nd (www.savantgenius.com) site is not loading properly in mobile and table devices. It is only loading properly in desktop browser. I have also found 32 console error.
Are there any jQuery issues? And please tell me how to be able to fix it.
I'm getting the "XMLHttpRequest cannot load
file:///D:/Work%20File/My%20Work%20File/mY%20Work%20Backup/Sophie/Work%20File/footer.html.
Cross origin requests are only supported for HTTP." and "Error: Failed
to execute 'send' on 'XMLHttpRequest': Failed to load
'file:///D:/Work%20File/My%20Work%20File/mY%20Work%20Backup/Sophie/Work%20File/footer.html"
error, but I don't know what's causing it nor how to fix it.
Please see the screenshot - http://prntscr.com/4fm0d8
I Think that you should call it from a http webserver and not like simple file in browser. This mean request a file in a web server like http://localhost/XML/catalog.html not from file:///E:/Projects/XML/catalog.html.
It is as the message says:
cannot load file:///D:/Work%20File/My%20Work%20File/mY%20Work%20Backup/Sophie/Work%20File/footer.html. .
You are referencing to a file on a Windows boxes filesystem and not in a webservers folder.
Second: you have a CORS-issue (which in this case is caused by the filesystem reference)
Cross origin requests are only supported for HTTP
See MDN for more infos.
To solve the issue, you have to configure your webserver to allow such requests. Check your webservers manual.
I had the same problem with my InfluxDB connection and it turns out I did not prepend the URL settings in the datasource with 'http://'. This could be nicer in Grafana, e.g. mentioning there is no protocol defined for accessing the source.
In your case it's clear that you somehow configured Grafana to look for D:\, which is not accessible for your browser. So check your data source URL.
I have public Google Drive file like this one: https://docs.google.com/uc?id=0B8G77eDgeMdwMmkwcnA5eUV2M0U&export=download
I want to download that file from a Chrome Extension.
I have added these urls to the "permissions" element in the extension manifest (there are some redirects when trying to download the file and I tried to add them all): "https://*.docs.googleusercontent.com/","https://docs.google.com/","http://docs.google.com/","https://accounts.google.com/", "https://www.google.com/"
When I try to download the file Chrome returns this error:
XMLHttpRequest cannot load https://docs.google.com/nonceSigner?nonce=s35adai1lp052&continue=https://do…Ddownload%26h%3D16653014193614665626&hash=inkfclb76vcru6uuoqkfp274hk5joqk9. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
It seems I have already allowed downloads for the url in question.
If I add the <all_urls> permission the download succeeds.
Any idea what permission I need to add? Thanks in advance.
Using for instance wget and looking at the reported redirections, you can see that the last host is something like:
doc-0c-80-docs.googleusercontent.com
The first part is probably variable, and wildcards in the host part of the URL can only match an entire part of the hostname. So you should add the following to your match patterns:
*.googleusercontent.com
You need at least the following minimum to access Drive files:
*://drive.google.com/*
*://*.googleusercontent.com/*
I'm getting this error in Firefox's Console: SecurityError: The operation is insecure and the guilty is HTML5 feature: window.history.pushState() when I try to load something with AJAX. It is supposed to load some data but Javascript stops executing on error.
I'm wondering why this may be happening. Is this some server misconfiguration? Any help would be appreciated.
UPDATE: Yes, it was a server error with domain name not matching: http://en.wikipedia.org/wiki/Same-origin_policy
Make sure you are following the Same Origin Policy. This means same domain, same subdomain, same protocol (http vs https) and same port.
How does pushState protect against potential content forgeries?
EDIT: As #robertc aptly pointed out in his comment, some browsers actually implement slightly different security policies when the origin is file:///. Not to mention you can encounter problems when testing locally with file:/// when the page expects it is running from a different origin (and so your pushState assumes production origin scenarios, not localhost scenarios)
We experienced the SecurityError: The operation is insecure when a user disabled their cookies prior to visiting our site, any subsequent XHR requests trying to use the session would obviously fail and cause this error.
In my case I was missing 'www.' from the url I was pushing. It must be exact match, if you're working on www.test.com, you must push to www.test.com and not test.com
You should try not open the file with a folder-explorer method (i.e. file://), but open that file from http:// (i.e. http://yoursite.com/ from http://localhost/)
I had this problem on ReactJS history push, turned out i was trying to open //link (with double slashes)
I had the same problem when called another javascript file from a file without putting javascript "physical" address.
I solved it by calling it same way from the html, example: "JS / archivo.js" instead of "archivo.js"
When creating a PWA, a service worker used on an non https server also generates this error.
replace serviceWorker.unregister() to serviceWorker.register() in index.js file
I solved it by switching tohttp protocol from the file protocol.
you can use "live-server" extension in VS code,
or, on node, use live-server [dirPath]
I had the same problem and it was caused by setting <base href=> to a naked domain while my server always served the www domain. Adding the www to the url in base href solved the issue.