从本地文件夹导入type = module的脚本会导致CORS问题 [英] Importing script with type=module from local folder causes a CORS issue
问题描述
我有一个小的html文件，它调用一个javascript文件，但是当我尝试在浏览器中访问它时，出现以下错误:
I have a little html file that calls a javascript file, but when I'm trying to access it in the browser I'm getting the following error:
在以下位置访问脚本来源中的'file:///C:/Users/jekob/Desktop/battleship/index.js'空"已被CORS政策阻止:仅跨源请求支持协议方案:http，数据，chrome扩展名，边缘，https，不受铬限制.
Access to script at 'file:///C:/Users/jekob/Desktop/battleship/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
我已经搜索了几个小时，发现可以通过服务器(例如node.js)托管我的应用程序，然后允许CORS.但是我不需要任何服务器.我只需要一个简单的html和一个js文件.
I've googled that for hours and found out that I can host my app by a server (like node.js) and then to allow CORS. However I don't want any server. I want just a simple html and a js file.
index.html:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>battle-ship</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="board"></div>
<script type="module" src="index.js"></script>
</body>
</html>
index.js:
import {board} from './board_0.1.js';
console.log(board);
board.js:
class cell{
constructor(){
this.locationByLetter = null;
this.locationByNumb = [];
this.occupied = false;
this.clicked = false;
}
}
class shipDitel{
constructor(name,size){
this.name = name;
this.size = size;
this.location =[];
}
}
export const board = buildBoard();
const shipType = [["Destroyer",2/*size*/],["Submarine",3],["Cruiser",3,],
["Battleship",4,],["AircraftCarrier",5]];
var shipsArr=setShip();
var selectedShip = selectShip(shipsArr[4]);
var stateGame ={
setting:true,
gameIsStart:false
}
function buildBoard(){
..
};
function setShip(){ //setting to a ship his name and size .
...
};
function selectShip(ship){
...
}
function onSelectedCell(cell){
...
};
function checkTheZone(cell){
...
};
推荐答案
我已经搜索了几个小时，发现可以通过服务器(例如node.js)托管我的应用
I've googled that for hours and found out that I can host my app by a server (like node.js)
是
，然后允许CORS.
and then to allow CORS.
由于它将是同源的，因此您不需要CORS.
Since it will be Same Origin, you won't need CORS.
但是我不需要任何服务器.我只需要一个简单的html和一个js文件.
However I don't want any server. I want just a simple html and a js file.
然后，您将无法使用浏览器端的ES6模块.
Then you can't use browser-side ES6 modules.
您首先需要编写代码以不使用模块，或者使用Webpack或Rollup之类的代码将代码转换为不使用模块.
You'll need to either write the code to not use modules in the first place, or use something like Webpack or Rollup to convert the code to not use modules afterwards.
这篇关于从本地文件夹导入type = module的脚本会导致CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
