CORS政策已阻止从源“ null”访问脚本“

Question

因此，当我尝试从另一个JavaScript文件导入类时，在控制台中出现如下错误：

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.

在我的html文件中，我以这种方式添加脚本文件：

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

我的index.js看起来像这样：

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);

和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); 
    }
}

我正在使用铬浏览器。我的文件夹结构如下所示：

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

任何人有任何想法如何避免cors政策？

Answer 1

ES6模块受同源政策的约束。您需要从本地服务器运行脚本，使用浏览器直接打开文件将不起作用。

请参阅此处Chrome 62 / Chrome Canary 64中的ES6模块支持，无法在本地使用，CORS错误

Answer 2

如果您不想设置本地服务器，您实际上可以（与之前的答案相反）使用该file://协议。为此，您必须使用该--allow-file-access-from-files标志运行浏览器。应该适用于所有基于 chromium 的浏览器，例如 Chrome、Opera、Brave 等。

Answer 3

看起来您正在尝试在本地（通过file://协议）打开网页，即双击该.html文件。不幸的是，模块只能通过 HTTP(s) 工作，因此您需要做的就是使用本地 Web 服务器。流行的选择包括：

• Live Server，一个 VS Code 扩展，它添加了一个右键单击选项以使用本地服务器运行您的页面。

• 节点静态服务器，一个简单的 http 服务器，用于从本地目录提供静态资源文件。

• 节点实时服务器易于安装和使用：

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

Answer 4

file://请求将不起作用，但您可以运行本地网络服务器（聚合物服务、快递等）来使用 HTTP 请求。您甚至可以使用以下 Chrome 扩展程序来运行本地网络服务器。

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