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...
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 have a problem with using the Leaflet JS map when copying code from view-source:
According to my previous question:
Leaflet Map code copied from View-source: not working
It looks like I require a web server,
Unfortunately It is not working in Localhost too.
After using the javascript code from the web I always get a lot of issues in my console.
I copy deliberately each single line of the code, taking into account any links. Now I don't understand where the problem lies.
In the web server someone's code looks clear and console is clear.
like here:
https://harrywood.co.uk/maps/examples/leaflet/kml.html
Once I copy all stuff on my drive and put it into the Wampp localhost I got a lot of errors in my console as per in the picture below:
Access to XMLHttpRequest at 'file:///U:/Work/Leaflet/KML/LotA.kml'
from origin 'null' has been blocked by CORS policy: Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https. KML.js:31 GET
file:///U:/Work/Leaflet/KML/LotA.kml net::ERR_FAILED
The code KML.js works on the web server and it's exactly the same as in my file!
Could you clarify for me please? Can I rut it on the localhost?
Do you know how to copy the code correctly? What stuff I have forgotten?
You need to download the KML file from your console's network tab, store it locally and then copy paste the client side code.
Note that this example is using a really old version of leaflet, 0.7.x
You can see the example in the following Demo
Edit:
I checked it locally and you are right regarding the previous library.
I made a plunker that seems to work locally using leaflet omnivore library to visualize a kml. I ran it with npm's serve and seems be working.
var runLayer = omnivore.kml('test.kml').addTo(map).on('ready', function () {
map.fitBounds(runLayer.getBounds());
});
Alternate demo
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.
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.
I obviously can't use server side languages, this is just a page on my desktop.
I tried using AJAX with jquery, but I get the following error message
Sorry but there was an error: 0 [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Line: 4"]
It has to do with the browser not loading scripts because it's hosted locally or something. So is there any way I can include files on a local machine without installing web server software?
This is an XSS error. You can't make http requests to third party sites (urls not on your domain). You would need to use a proxy to make requests to the page (or have the owner allow your site to make XSS requests).
Shameless plug of a library that I wrote the solve similar problem. We wanted to be able to splice HTML files for backend implementations without the overhead of a local HTTP server implementing server side includes. This library works on HTTP or local filesystem. But, as the repository README notes, you'll have to enable a --allow-file-access-from-files flag to your Chrome runtime. Other browsers work out of box.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
The above will take the contents of /path/to/include.html and replace the div with it.