因此,当我尝试从另一个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政策吗?
6条答案
按热度按时间093gszye1#
ES6模块采用同源策略,您需要在本地服务器上运行脚本,直接用浏览器打开文件将无法正常工作。
请参见此处ES6 module support in Chrome 62/Chrome Canary 64, does not work locally, CORS error
093gszye2#
看起来您正在尝试在本地打开网页(通过
file://
协议),例如双击.html
文件。遗憾的是,模块只能通过HTTP工作,因此您需要做的是使用本地Web服务器。常见的选择包括:4dbbbstv3#
file://
请求将不起作用,但您可以运行本地Web服务器(聚合物服务器、express等)来使用HTTP请求。您甚至可以使用以下Chrome扩展来运行本地Web服务器。https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
8tntrjer4#
官方MDN文档提到运行带有js板载的本地
.html
文件会导致CORS错误。有关详细信息,请查看“JavaScript Modules“文档页面。“模块和标准脚本之间的其他差异”部分指出:
您需要注意本地测试-如果您尝试在本地加载HTML文件(例如使用file://URL),您将由于JavaScript模块安全要求而遇到CORS错误。您需要通过服务器进行测试。
11dmarpk5#
如果你不想设置本地服务器,你可以使用
file://
协议(与前面的答案相反)。要这样做,你必须运行带有--allow-file-access-from-files
标志的浏览器。应该在所有基于chromium的浏览器中工作,如Chrome,Opera,Brave等。hgb9j2n66#
要修复这个错误也很容易,你需要做的就是创建一个本地的Web服务器,然后上传Html和JS文件到Web服务器上,然后你就可以在HTTP或HTTPS协议的Web浏览器中浏览Html文件,然后它也会使用HTTP或HTTPS协议加载外部JS文件。
1-首先,转到扩展并下载Live Server。2-按F1并输入Live Server,然后从菜单中选择用Live Server打开,就这样了:)