从本地文件夹导入 type=module 的脚本会导致 CORS 问题

2022-01-15 00:00:00 cors javascript html es6-modules

我有一个调用 javascript 文件的小 html 文件，但是当我尝试在浏览器中访问它时，出现以下错误:

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' 来自原产地null"已被 CORS 策略阻止:跨源请求仅支持协议方案:http、data、chrome-extension、edge、https，chrome 不受信任.

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.

由于它将是同源，因此您不需要 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.

相关文章