1. Why The Access To Script At …… From Origin ‘null’ Has Been Blocked By CORS Policy Error Happen?
- 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 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.
- 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.
- 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 webserver, 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. 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’.