CODEWITHSUNDEEP
javascriptxmlhttprequestcross-domainlocal-files
User4870
User4870

Reputation: 426

Cross-origin request for local file

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

Upvotes: 19

Views: 38902

Answers (6)

Ayush Seth
Ayush Seth

Reputation: 1209

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.

Upvotes: -2

koepnick
koepnick

Reputation: 59

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.

Source

Upvotes: 3

mathijsuitmegen
mathijsuitmegen

Reputation: 2318

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>

Getting it to work

Advice for running ajax requests from your local machine:

Install a lightweight webbrowser. No need to install a webserver.

Nothing happens

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.

How to pick a web browser

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.

Disclaimer

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.

  • For example Google Chrome:
    • 2010: CORS functionality introduced
    • 2020: Stricter CORS policies begin gradually rolling out.
    • 2023: Stricter CORS policies are now the standard.

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!

Testing

  • Tested the local HTML-file in Falkon using version 3.1.0 (March 2019).

Upvotes: 0

JamesBock
JamesBock

Reputation: 91

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

Upvotes: 1

Dusklight
Dusklight

Reputation: 92

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.

Upvotes: -2

User4870
User4870

Reputation: 426

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.

Upvotes: 15

Related Questions