Access to Script at ' from origin 'null' has been blocked by CORS policy

JavascriptEcmascript 6

Javascript Problem Overview


So when I am trying to import class from another javascript file, I am getting error in console like this:

Access to Script at 'file:///home/../.../JavaScript/src/index.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

In my html file I am adding script file in this manner:

<script type="module" src="src/index.js"></script>

My index.js looks like this:

import Paddle from "/src/paddle";

let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext("2d");

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);

paddle.draw(ctx);

And paddle.js:

export default class Paddle {
    constructor(gameWidth, gameHeight){
        this.width = 150;
        this.height = 30;

        this.position = {
            x: gameWidth/2 - this.width/2,
            y: gameHeight-this.height-10
        }
    }
    draw(ctx){
        ctx.fillRect(this.position.x, this.position.y, this.width, this.height); 
    }
}

I am using chromium browser. And my folder structure looks like:

/javascript
   -/src
       -index.js
       -paddle.js
   -index.html

Anyone has any idea how to avoid cors policy?

Javascript Solutions


Solution 1 - Javascript

ES6 modules are subject to same-origin policy. You need to run your script from a local server, opening the file directly with a browser will not work.

see here https://stackoverflow.com/questions/46992463/es6-module-support-in-chrome-62-chrome-canary-64-does-not-work-locally-cors-er?rq=1

Solution 2 - Javascript

Looks like you're trying to open the web-page locally (via file:// protocol) i.e. double clicking the .html file. Unfortunately modules only work via HTTP(s), so all you need to do is use a local web server. Popular choices include:

  • Live Server, a VS Code extension that adds a right-click option to run your pages with a local server.

  • Node static server, a simple http server to serve static resource files from a local directory.

  • Node live server is easy to install and use:

    npm install -g live-server // Install globally via npm
    live-server                // Run in the html's directory
    

Solution 3 - Javascript

file:// requests will not work, but you can run a local webserver (polymer serve, express, etc.) to use HTTP requests instead. You could even use the following Chrome extension to run a local webserver.

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSuuleView Question on Stackoverflow
Solution 1 - JavascriptTaha AzzabiView Answer on Stackoverflow
Solution 2 - JavascriptNikos AthanasiouView Answer on Stackoverflow
Solution 3 - JavascriptVibhor DubeView Answer on Stackoverflow