从本地文件夹导入 type=module 的脚本会导致 CORS 问题-file-IT问答社区-解决你的IT疑问

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

Doualamm 1月前

我有一个调用 javascript 文件的小型 html 文件，但是当我尝试在浏览器中访问它时，出现以下错误：访问'file:///C:/Users/jekob/Desktop/battles... 处的脚本。

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

从来源 'null' 访问位于 'file:///C:/Users/jekob/Desktop/battleship/index.js' 的脚本已被 CORS 策略阻止：跨源请求仅支持以下协议方案：http、data、chrome-extension、edge、https、chrome-untrusted。

我在 Google 上搜索了几个小时，发现我可以通过服务器（如 node.js）托管我的应用程序，然后允许 CORS。但是我不需要任何服务器。我只想要一个简单的 html 和一个 js 文件。

索引.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){  
...
};

帖子版权声明 1、本帖标题：从本地文件夹导入 type=module 的脚本会导致 CORS 问题
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Doualamm在本站《file》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

white-wolf97 1月前 0 只看Ta

引用 2楼
```
<link rel="modulepreload" crossorigin href="https://assets-cdn.kahoot.it/challenge/assets/vendor-c3525917.js">
<link rel="stylesheet" href="https://assets-cdn.kahoot.it/challenge/assets/index-8fade471.css">
```
Davood 1月前 0 只看Ta

引用 3楼
找到了一种借助“本地服务器”概念在本地运行的解决方案。

步骤
1. 启动 Visual Studio
2. 从市场 Live Server 安装
3. 右键单击您的 html 文件，使用 Live Server 打开它。（它将使用端口 5500 运行）
Mauricio Hernández 1月前 0 只看Ta

引用 4楼

我在 Google 上搜索了几个小时，发现我可以通过服务器（如 node.js）托管我的应用程序

是的

然后允许 CORS。

因为它是同源的，所以你不需要 CORS。

但是我不需要任何服务器。我只想要一个简单的 html 和一个 js 文件。

那么你就不能使用浏览器端的ES6模块。

您首先需要编写代码以不使用模块，或者使用 Webpack 或 Rollup 之类的工具将代码转换为之后不使用模块。

HTML 问题跟踪器中有关于 CORS 要求动机的讨论。
dany 1月前 0 只看Ta

引用 5楼

模块需要服务器。对于小型测试和摆弄，我发现只需从相关目录启动 python HTTP 服务器即可；例如