javascript CORS策略已阻止从源“null”访问“处的脚本

iovurdzv  于 2023-01-29  发布在  Java
关注(0)|答案(6)|浏览(226)

因此,当我尝试从另一个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);

和桨。

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

我使用chromium浏览器。我的文件夹结构看起来像:

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

有谁知道怎么避免cors政策吗?

093gszye

093gszye1#

ES6模块采用同源策略,您需要在本地服务器上运行脚本,直接用浏览器打开文件将无法正常工作。
请参见此处ES6 module support in Chrome 62/Chrome Canary 64, does not work locally, CORS error

093gszye

093gszye2#

看起来您正在尝试在本地打开网页(通过file://协议),例如双击.html文件。遗憾的是,模块只能通过HTTP工作,因此您需要做的是使用本地Web服务器。常见的选择包括:

  • Live Server,一个VS代码扩展,它添加了一个右键单击选项,以便在本地服务器上运行页面。
  • 节点静态服务器,一个简单的HTTP服务器,用于从本地目录提供静态资源文件。
  • Node live server易于安装和用途:
npm install -g live-server // Install globally via npm
live-server                // Run in the html's directory
4dbbbstv

4dbbbstv3#

file://请求将不起作用,但您可以运行本地Web服务器(聚合物服务器、express等)来使用HTTP请求。您甚至可以使用以下Chrome扩展来运行本地Web服务器。
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

8tntrjer

8tntrjer4#

官方MDN文档提到运行带有js板载的本地.html文件会导致CORS错误。有关详细信息,请查看“JavaScript Modules“文档页面。
“模块和标准脚本之间的其他差异”部分指出:
您需要注意本地测试-如果您尝试在本地加载HTML文件(例如使用file://URL),您将由于JavaScript模块安全要求而遇到CORS错误。您需要通过服务器进行测试。

11dmarpk

11dmarpk5#

如果你不想设置本地服务器,你可以使用file://协议(与前面的答案相反)。要这样做,你必须运行带有--allow-file-access-from-files标志的浏览器。应该在所有基于chromium的浏览器中工作,如Chrome,Opera,Brave等。

hgb9j2n6

hgb9j2n66#

要修复这个错误也很容易,你需要做的就是创建一个本地的Web服务器,然后上传Html和JS文件到Web服务器上,然后你就可以在HTTP或HTTPS协议的Web浏览器中浏览Html文件,然后它也会使用HTTP或HTTPS协议加载外部JS文件。
1-首先,转到扩展并下载Live Server。2-按F1并输入Live Server,然后从菜单中选择用Live Server打开,就这样了:)

相关问题