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.
Related
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/
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 creating a local HTML page to serve as an interface to view videos I have downloaded to my computer. This file is not part of a server and just exists on my local harddrive. I also saved all the metadata from those videos into one large json(ish) file (It is not correctly formatted as json, each new line is a different json object). I need to load the data from my json file into my html page in order to access the metadata.
<script>
$.get('file://database.json', function(data) {
alert(data);
});
</script>
However, as expected I am receiving the cross origin error:
Access to XMLHttpRequest at 'file:///E:/Videos/database.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.
I know it is difficult to work around CORS for security reasons but I am looking for a solution that does not require setting up a web server and will work on most browsers without having to launch them with special arguments or change the settings. I don't want to have to create a full application for the viewer because my goal for the viewer was simplicity, compatibility and ease of design.
Is there is a way around this policy or an alternative method I can use to load files into my local HTML page?
Edit:
I tested #JasonB's idea of loading the database.json file as a script and it works. However, to get it to work I had to manually add some lines to the file, and format the json properly. I am wondering if there is a way to load the unformatted file as a script and still use its data? Here is the question I asked about formatting my file as a reference:
Batch File: Append line to file, keeping it wrapped
Just put your content into a .js file and link it like any other javascript file and the browser won't have any problem with it.
The browser will stop you from requesting things via file:// as that is potential security issue, even if the file is loaded via file://.
An alternative could be to use the non-standard FileSystem API that is available in Chrome, Firefox, Opera and Edge. It lets you store files as well as retrieve them again. I have a running sample web app here and the code is here.
Note that this won't work out of the box, either as "file://" origins will cause DOMExceptions normally. For Chrome, you can start the browser with the --allow-file-accom-files flag to allow access to the FileSystem API from a local HTML file.
There is a small web app that I want to scrape. It loads various json snippets into a panel on the page when you click on a tree widget. I estimate that there are no fewer than about 500 such json files. I've managed to figure out how to grab those, and I was hoping that I could simply place those in the appropriate folder and the xhr calls would retrieve them.
As it is, I receive this particular error message when clicking on my offline version of the webapp:
XMLHttpRequest cannot load
file:///json/ajaxbrowse.php?n=5&x=1&z=-1&cs=1&ix=-1. Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource
Is there a way to accomplish the loading of external files here without a web app (or disabling Chrome security features)? The html file and the json files live in the same folder. Given their format (json), I can't easily load these into iframes.
Googling's not showing me much for this, and I'm not sure what javascript/browser feature I might be searching for.
I am looking for a method that helps quickly identify if a js form error is related to cross domain policy mecanism. If possible this method needs to be done from remote connection, as I do not have access to production server and everything is working fine in local sandbox and staging server. The issue only comes up on production server.
This occurs on a drupal webform that has a file upload field, used for an image upload. Ie8 and Ie9 fail to upload, the throbber runs indefinetely and a js ajax message is returned and interpreted as a downloable file. The file contains the ajax response.
I am by no means a js guru and this one has me stumped. How would one identify / troubleshoot this issue?