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

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.

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

  1. 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.
  2. 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>
  3. 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 as 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.

  1. To fix this error is also easy, what you need to do is to create a local web server, and then upload the Html and JS file to the webserver.
  2. 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.
  3. If you use python3, you can follow the below steps to access the Html file from a local webserver.
  4. 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/) ...
  5. The command python -m http.server will start a local webserver and listen on the port with the number 8000.
  6. And the Html file is just saved in the root directory of the local webserver, then you can access it on the web browser with the URL http://localhost:8000/test.html.
  7. Now you will find the error will be fixed.

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

  1. You can follow this article to fix the below errors.
  2. Uncaught DOMException DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.
  3. 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’.
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Clicky
0
Would love your thoughts, please comment.x
()
x