This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Access to Script at ' from origin 'null' has been blocked by CORS policy
(6 answers)
Closed last month.
I have an HTML/CSS/JS program that uses p5.min.js and works perfectly fine. However, whenever I use it to load an image / JSON / font file, it gives me the following error:
Access to XMLHttpRequest at 'file:///C:/Users/ ... /Fonts/RubikMonoOne-Regular.ttf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.
The section which throws the error within my code:
let font;
function preload() {
font = loadFont("./Fonts/RubikMonoOne-Regular.ttf"); // loadFont stems from p5.js
}
I am not sure what is causing the error as I haven't tried to do anything fancy, just run the p5js loadFont command. I am not sure why it is even a cross-origin request, given that they don't work even when in the same directory. I am simply running the file on my desktop, not using a web or localhost server.
I've found several answers online, but none of them work for me. All of them seem to be for deployed servers or localhost. For reference, I am using Microsoft Edge, but Chrome doesn't work either.
I found an answer which suggested running MS Edge / Chrome via cmd with:
–-allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating` but in both cases that just tried to open an invalid link `xn---allow-file-access-from-files-k71r/
If I can, I would like to avoid running a localhost server as that has also given me trouble. However, I am hoping to upload the file to fxhash, so any solution would need to be universal.
I'm not sure why it has gotten to be this complicated, I thought it would be a super easy process given it's only double-clicking on an HTML file to run it without servers, etc.
I am guesting that you are using the html file by directly openning it?!
You need to run your html file inside a local server.
Here are some helpful links to get you started :
https://timnwells.medium.com/quick-and-easy-http-servers-for-local-development-7a7df5ac25ff
https://www.npmjs.com/package/http-server
https://codingshower.com/quick-local-web-server/
Related
This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Closed 2 years ago.
Trying to get some data from a local JSON file stored in the same directory, I get this:
Access to XMLHttpRequest at
'file:///C:/Visual%20Studio%20Code/Practice/customer.json' from origin
'null' has been blocked by CORS policy: Cross origin requests are only
supported for protocol schemes: http, data, chrome, chrome-extension,
https.
app.js:14 GET file:///C:/Visual%20Studio%20Code/Practice/customer.json
net::ERR_FAILED
Can anyone please suggest a solution?
Some browsers prohibit any kind of ajax from local files (resources loaded via the file: scheme). You appear to be using one of them.
The solution is to install a local webserver and load the resources via http: instead. Some IDEs have a minimal webserver included, either directly or via an extension. But if not, a local install of Apache or nginx is fairly easy to install, or you can roll your own with Express.js or Koa.js or similar.
This isn't the only subtle difference between how browsers handle file: resources vs. http:/https: resources, so when doing web development, it's always best to use a local web server, not file:.
I am trying to run graph editor example in mxgraph. But i am unable to run it locally on my system.
It gives the error msg of unable to load the resource.
it says that it is blocked by cors.. i have disable XMLHTTP support in the browser but still same error. i am using it for development processes so want to run it locally.
i expected to run the graph editor locally on my machine. but getting error of unable to load the resources.
the error msg is as follows:
Access to XMLHttpRequest at 'file:///C:/Users/USER/Desktop/projects%20bpmn/mxgraph-master/javascript/examples/grapheditor/www/resources/grapheditor.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
If you use Chrome you could disable web security which would allows you to do XHR locally (Check this out).
However... I tried that and it didn't work with grapheditor, I imagine it has to do with the responses you get when reading from the filesystem using file:///, I'm guessing you don't get 200 and other responses). Also disabling Chrome security is, well... insecure; so I wouldn't recommend that as a go to alternative.
From what I've tried you can go with two alternatives:
Have your own webserver running somewhere, add grapheditor to some path inside you webserver and access grapheditor that way. There's a disadvantage in running it this way, you don't get all the functionalities because you need some back-end to process stuff and you would have to have one (or create one).
(I assume you know your way around in a Command Line and that you have java installed) Use the included Java webserver. To run it, download Ant. Then inside the java dir of mxgraph run ant grapheditor. The java dir is: mxgraph/java , you will find a build.xml file inside.
I am currently doing some experimentation using the second alternative and it's working ok. I would definitely spend some time on option 2 so you can have grapheditor running smoothly.
Hope this helps...
I am attempting to build a tiny browser-based app which will run from a file: URL without using a server. (So I can just drop the files on a flash drive, and launch it by just double-clicking the HTML file.) The app needs to read another file, but each approach I attempt to use yields a CORS error.
My two approaches have been:
Make an AJAX request
Load the content into an iframe and try to read the document
which yield the following errors, respectively:
Access to XMLHttpRequest at 'file:///PATHHERE' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame.
Per MDN's definition of an origin:
Two URLs have the same origin if the protocol, port (if specified), and host are the same for both.
Based on that definition, any file: URL should be same-origin and hence CORS (being cross origin) would not apply.
I found that MDN has a an additional page about file: URLs which states that the desired file must be in the same or subdirectory of the page's file to be considered same-origin. I found that is true for Firefox, but Opera, Chrome, and Safari appear to not follow that idea but rather treat all file: URLs as cross-origin, even if the page is trying to load a copy of itself!
So I could just only use Firefox, except the catch is the file I'm trying to load is a directory and Firefox treats directory listings as cross-origin even if it is a subdirectory of the directory where the original page lives. The error is "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///myapp/subdir. (Reason: CORS request not http)." (Although I would content that it is not cross-origin, therefore shouldn't have to be HTTP.)
So is there any way in any current major browser (preferably Chrome since it would be available everywhere I'd want to use this) to get a directory listing over a file: URL?
And if not, is there any good reason why that's not supported, at least for directories under the folder where the page was loaded from? As in, is there some security reason for it that just isn't obvious to me? Or is it just the general bias against file: URLs? (i.e. that any real app would be hosted on a webserver.)
This is a security feature of internet browsers. Reading a file with file:/// protocol is a big security problem. That is why it is not allowed.
If you still want to read local file in your html page, you can use electron.js - it uses a different approach.
https://electronjs.org/
This question already has answers here:
AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
(17 answers)
Closed 7 years ago.
I have some react js code, which if I embed it in my index.html works fine. But when I try to reference that code from an external .jsx file, it fails to access that code and throws an error. Please help.
This is how I am referencing the jsx file
<script type="text/jsx" src="autocomplete_js/custom_react.jsx">
These are the errors I get:
Resource interpreted as Script but transferred with MIME type text/plain: "file:///C:/react/autocomplete_js/custom_react.jsx"
XMLHttpRequest cannot load file:///C:/react/autocomplete_js/custom_react.jsx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource
Be sure to make your files be served by a web server (Apache or Ngnix).
I tried both, when files are served by Apache, it works like a charm, when directly opened in Chrome (no problem with Safari), I have the same error.
I'm trying to load some scripts from within my app.js file that contains all the javascript logic for my application, but am getting following error in chrome console:
XMLHttpRequest cannot load file:///... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
$.getScript('lib/fastclick.js', function () {
/* ... */
});
this is being tested locally, haven't uploaded it to my server yet, maybe the issue will not appear there, however I would like to know the cause and perhaps the fix to be able and continue working locally.
this is being tested locally, haven't uploaded it to my server yet, maybe the issue will not appear there,
Correct.
Your local test environment should include an HTTP server. There are many differences between a webpage environment loaded over HTTP and one loaded over FILE.
however I would like to know the cause
Web pages running on your hard disk are not allowed to access other files on your hard disk with JS. Imagine what would happen if that wasn't the case and you opened an HTML document attached to an email sent by someone malicious.