問題描述
我有一個調用 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.
這篇關于從本地文件夾導入 type=module 的腳本會導致 CORS 問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！