How To Fix Error Access To Script At From Origin 'null' Has Been Blocked By Cors Policy: Cross Origin Requests Are Only Supported For Protocol Schemes: Http, Data, Chrome, Chrome-extension, Chrome-untrusted, Https Windows Tricks

I write an Html file, and include an external javascript file in the Html file with the code <script type=”module” src=”test.js” ></script>. But when I open the Html file from a web browser with a local file URL like file:///D:/Work/……/test.html that starts with the file:// protocol scheme, it shows the error message Access to script at …… from origin ‘null’ has been blocked by CORS policy. This article will tell you how to fix this error.

Table of Contents

1. Why The Access To Script At …… From Origin ‘null’ Has Been Blocked By CORS Policy Error Happen?

Because I open the Html file in a web browser from a local file then it will load the external javascript file with the file:// protocol scheme also.

Below is the Html file source code content.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script type="module" src="test.js" ></script>
</head>
<body>
......
</body>
</html>

This makes the error happen because the web browser only allows CORS (Cross-Origin Requests) for the URL starting with the following protocol schemes: HTTP, HTTPS, etc, we can see this from the detailed error messages below.

Access to script at 'file:///D:/Work/....../test.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

2. How To Fix The Access To Script At …… From Origin ‘null’ Has Been Blocked By CORS Policy Error.

Fixing this error is also easy, what you need to do is to create a local web server and then upload the Html and JS files to the web server.

Then you can browse the Html file in the web browser with the HTTP or HTTPS protocol, and then it will also load the external JS file using the HTTP or HTTPS protocol also.
If you use python3, you can follow the below steps to access the Html file from a local webserver.

Open a terminal and go to the Html file saved directory, and run the command python -m http.server as below.

D:\Work\dev2qa.com-example-code\PythonExampleProject\html\canvas\snowflake-404-page>python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

The command python -m http.server will start a local webserver and listen on the port with the number 8000.
And the Html file is just saved in the root directory of the local web server, then you can access it on the web browser with the URL http://localhost:8000/test.html.
Now you will find the error will be fixed.

3. Fix This Issue By Set Up CORS Policy On Server To Allow Cross-Origin Requests.

To fix this issue, you can also set up a CORS policy on the server to allow cross-origin requests.
You can use an Apache or Nginx server to set up the CORS policy or use a JavaScript library to make the cross-origin request.

3.1 Steps To Set Up CORS Policy On Apache Server.

Setting up a CORS policy on an Apache server is very simple, just add the following code to your Apache configuration file: Header set Access-Control-Allow-Origin “*”.

This will allow all domains to access your server, or you can specify specific domains to access your server.

3.2 Steps To Set Up CORS Policy On Nginx Server.

Setting up a CORS policy on an Nginx server is also simple, just add the following code to your Nginx configuration file: add_header ‘Access-Control-Allow-Origin’ ‘*’;.
This will allow all domains to access your server, or you can specify specific domains to access your server.

4. How To Use A Javascript Library To Make The Cross-origin Request.

Making a cross-origin request using a JavaScript library is very simple, just use the XMLHttpRequest or Fetch API to make the request.
You can also use third-party libraries, such as Axios, to make cross-origin requests.

Here is an example code of making a cross-origin request using XMLHttpRequest.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onload = function () {
    // do something with the response
};
xhr.send();

Here is an example code of making a cross-origin request using Fetch API.

fetch('http://example.com/api/data')
  .then(function(response) {
    // do something with the response
  });

Here is an example code for making a cross-origin request using Axios.

axios.get('http://example.com/api/data')
  .then(function (response) {
    // do something with the response
  });

5. Other Errors That Can Be Fixed By This Article.

You can follow this article to fix the below errors.

Uncaught DOMException DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.
Exception : SecurityError: Failed to construct ‘Worker’: Script at ‘file:///D:/Work/dev2qa.com-example-code/PythonExampleProject/html/webworker/html5-webworker-example.js’ cannot be accessed from origin ‘null’.

How To Fix Error Access To Script At From Origin ‘null’ Has Been Blocked By Cors Policy: Cross Origin Requests Are Only Supported For Protocol Schemes: Http, Data, Chrome, Chrome-extension, Chrome-untrusted, Https