I need to open a local html file in the browser. The javascript works fine but ajax stops working and XMLHttpRequest gives a cross origin error. Is there a way to run ajax from local directory. It is necessary for me that it is run from local file only.
Thanks
For anyone who wants to know, I had to run a server in the app to serve the js files. Seems like it's not possible to do it without running a server. If anyone knows of another way, do tell.
The simplest way to allow this in Firefox is to navigate to about:config, look for the privacy.file_unique_originsetting and toggle it. Its value should read 'false' now.
Essentially, Firefox used to treat local files from the same directory as being from the same source, thus CORS was happily satisfied. That behavior changed after CVE-2019-11730 was discovered.
It worked fine for me on 84.0.1 on Arch. Just be sure to turn it on again when not locally debugging.
If you are using VS Code, the Live Server extension might help you. It resolved a cross-origin issue I was having when editing a webpage.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Here's a local HTML-file that raises a cross origin error when executing an XMLHttpRequest.
<!DOCTYPE html>
<html>
<body>
<h2>Using the XMLHttpRequest Object</h2>
<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "https://itcorp.com/", true);
xhttp.send();
}
</script>
</body>
</html>
Advice for running ajax requests from your local machine:
Install a lightweight webbrowser. No need to install a webserver.
When using a modern browser, the console in the developer tools shows an error:
| Error |
| - |
| Access to XMLHttpRequest at "https://itcorp.com/" from origin "null" has been blocked by CORS policy: No "Access-Control-Allow-Origin" header is present on the requested resource. |
Instead of influencing or disabling the protective mechanism your web browser, we want to use a browser that has limited protection whilst browsing the web.
Using website 'AlternativeTo' I found an alternative to Google Chrome webbrowser: Falkon.
Falkon is available for Windows and Linux.
| 1. Modern browser |
|---|
| When opening your local HTML-file in Chrome: |
| Clicking the button is possible but nothing happens. |
| 2. Lightweight browser |
|---|
| When opening your local HTML-file in Falkon: |
| Clicking the button is possible and content is changed. |
Requesting resources from (evil) websites is dangerous! All modern browsers will block these type of requests. In 2011 a specification was designed for it based on the 'same-origin' concept (RFC 6454). Modern browsers implemented protective functionality and forced it to end users as a policy.
As a developer you may want to use a lightweight browser for browsing local files. You should be careful in NOT using this browser for browsing the internet!
If you are using chrome, try this extension
CORS allows web applications on one domain to make cross domain AJAX requests to another domain. It's dead simple to enable, only requiring a single response header to be sent by the server.
What this extension does is add to response header rule - Access-Control-Allow-Origin: *
You can do that manually also by sending a response header.
For simple CORS requests, the server only needs to add the following header to its response:
Access-Control-Allow-Origin: *
Read this for more info.
Access-Control-Allow-Origin: * header to its response. –
Ulysses If you are able to change the server code, you can try adding the string "null" to allowed origins. In Chrome, it sends the origin as "null" if it's running from a local file.
Here's an example in ASP.NET Core for setting up the "null" origin:
services.AddCors(options =>
{
options.AddPolicy("InsecurePolicy",
builder => builder
.WithOrigins("null")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
Note that this is not recommended, but might be good enough if you just need it during development.
© 2022 - 2024 — McMap. All rights reserved.