Блог

Главная - Вопросы по программированию - Импорт скрипта с типом = module из локальной папки вызывает проблему CORS

Импорт скрипта с типом = module из локальной папки вызывает проблему CORS

#javascript #html #cors #es6-modules

#javascript #HTML #cors #es6-модули

Вопрос:

У меня есть небольшой HTML-файл, который вызывает файл javascript, но когда я пытаюсь получить к нему доступ в браузере, я получаю следующую ошибку:

Доступ к скрипту в ‘file:///C:/Users/jekob/Desktop/battleship/index.js ‘ from origin ‘null’ заблокирован политикой CORS: запросы с перекрестным источником поддерживаются только для схем протоколов: http, data, chrome-extension, edge, https, chrome-ненадежный.

Я часами гуглил это и обнаружил, что могу разместить свое приложение на сервере (например node.js ) а затем разрешить CORS. Однако мне не нужен какой-либо сервер. Я хочу просто простой HTML и js-файл.

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

Комментарии:

1. Возможно, удастся запустить экземпляр Chrome (только для этой веб-страницы) с опцией командной строки только для этой проблемы --disable-web-security и обойти защиту CORs. Но вы НИКОГДА не должны регулярно просматривать Интернет с этим параметром, поскольку это открывает большие дыры в безопасности и уязвимости.

2. для модулей требуется сервер. для небольших тестов и возни с ними мне легко просто запустить HTTP-сервер python из рассматриваемого каталога; например python -m http.server

Ответ №1:

Я часами гуглил это и обнаружил, что могу разместить свое приложение на сервере (например node.js )

ДА

а затем разрешить CORS.

Поскольку он будет того же происхождения, вам не понадобится CORS.

Однако мне не нужен какой-либо сервер. Я хочу просто простой HTML и js-файл.

Тогда вы не сможете использовать модули ES6 на стороне браузера.

Вам нужно будет либо написать код, чтобы не использовать модули в первую очередь, либо использовать что-то вроде Webpack или Rollup для преобразования кода, чтобы впоследствии не использовать модули.

В HTML issue tracker есть обсуждение мотивации требования CORS.

Ответ №2:

Найдено решение для запуска его локально с помощью концепции «локального сервера».

Шаги

  1. Запустите Visual Studio
  2. Установить Live Server из Marketplace
  3. Щелкните правой кнопкой мыши ваш HTML-файл, откройте его с помощью Live Server. (Он будет работать с портом 5500)

введите описание изображения здесь