Das Importieren von Skripts mit type=module aus dem lokalen Ordner verursacht ein CORS-Problem

Lesezeit: 2 Minuten

Ich habe eine kleine HTML-Datei, die eine Javascript-Datei aufruft, aber wenn ich versuche, im Browser darauf zuzugreifen, erhalte ich die folgende Fehlermeldung:

Der Zugriff auf das Skript unter „file:///C:/Users/jekob/Desktop/battleship/index.js“ vom Ursprung „null“ wurde durch die CORS-Richtlinie blockiert: Ursprungsübergreifende Anforderungen werden nur für Protokollschemata unterstützt: http, data , chrome-extension, edge, https, chrome-untrusted.

Ich habe das stundenlang gegoogelt und herausgefunden, dass ich meine App von einem Server (wie node.js) hosten und dann CORS zulassen kann. Allerdings möchte ich keinen Server. Ich möchte nur eine einfache HTML- und eine JS-Datei.

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

  • Es ist möglicherweise möglich, eine Chrome-Instanz (nur für diese Webseite) mit der Befehlszeilenoption nur für dieses Problem zu starten --disable-web-security und CORs-Schutz umgehen. Aber Sie sollten mit dieser Einstellung NIEMALS regelmäßig im Internet surfen, da sie große Sicherheitslücken und Schwachstellen öffnet.

    – jfriend00

    13. September 2020 um 17:13 Uhr


  • Module erfordern einen Server. Für kleine Tests und Herumspielen finde ich es einfach, einfach einen Python-HTTP-Server aus dem betreffenden Verzeichnis zu starten. wie python -m http.server

    – DWR

    13. September 2020 um 17:50 Uhr


Das Importieren von Skripts mit typemodule aus dem lokalen Ordner
QUentin

Ich habe das stundenlang gegoogelt und herausgefunden, dass ich meine App von einem Server (wie node.js) hosten kann.

Jawohl

und dann um CORS zuzulassen.

Da es sich um denselben Ursprung handelt, benötigen Sie kein CORS.

Allerdings möchte ich keinen Server. Ich möchte nur eine einfache HTML- und eine JS-Datei.

Dann können Sie keine browserseitigen ES6-Module verwenden.

Sie müssen entweder den Code so schreiben, dass Module überhaupt nicht verwendet werden, oder etwas wie Webpack oder Rollup verwenden, um den Code so zu konvertieren, dass anschließend keine Module verwendet werden.


Es gibt eine Diskussion im HTML Issue Tracker über die Motivation für die CORS-Anforderung.

998170cookie-checkDas Importieren von Skripts mit type=module aus dem lokalen Ordner verursacht ein CORS-Problem

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy