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

Question

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?

Answer 1

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 ES6 module support in Chrome 62/Chrome Canary 64, does not work locally, CORS error