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

Importing script with type=module from local folder causes a CORS issue(从本地文件夹导入 type=module 的脚本会导致 CORS 问题)

本文介绍了从本地文件夹导入 type=module 的脚本会导致 CORS 问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个调用 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:

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

问题描述

推荐答案