Как исправить доступ к скрипту из Origin Null, заблокированного ошибкой CORS? –
Недавно я загрузил HTML-проект с GitHub. К сожалению, мне не удалось открыть файл index.html в браузере, в котором было пустое содержимое. В консоли браузера отображалась ошибка «Доступ к сценарию «file:///…» из источника «null» заблокирован политикой CORS». Если вы столкнулись с такой ситуацией, вот как создать локальный сервер в Visual Studio Code, чтобы решить проблему и загрузить HTML-файл без ошибок.
Ошибка CORS из-за файлового протокола
Политика CORS для файлового протокола
Как упоминалось в ошибке, запросы CORS или перекрестного происхождения работают только с HTTP (S), а не с протоколом file://. Ошибка возникает, когда файл HTML вызывает модули JavaScript, используя файловый протокол. В моем случае исходный HTML-код содержит следующую строку, которая представляет собой тот же файл, который отображается в ошибке консоли.
Загрузите приложение Visual Studio Code
Установите и откройте приложение и щелкните значок «Расширения», отображаемый на левой боковой панели (последний значок сверху). Введите «живой сервер» и найдите расширение Live Server от Ritwick Dey. Это очень популярное расширение, его установили почти 39 миллионов человек. Нажмите кнопку «Установить».
Найдите расширение Live Server в VS Code
Вам будет предложено всплывающее окно с вопросом, доверяете ли вы автору. Нажмите кнопку «Доверить рабочую область и установить», чтобы продолжить.
Доверьте рабочую область и установите расширение
После успешной установки вы увидите подробную информацию о расширении.
Установлено расширение живого сервера
Откройте HTML-файл и запустите сервер
Перейдите в меню «Файл > Открыть» и выберите папку проекта, и вы увидите древовидное представление всех файлов/папок в приложении. Найдите и выберите HTML-файл в папке, в которой отображалась ошибка CORS. Нажмите на опцию «Go Live», которая отображается в нижней строке состояния.
Запустить локальный сервер
Вы увидите сообщение «Сервер запущен на порту: 5500» с «источником: Live Server (расширение)».
Локальный сервер запущен
Проверьте свою страницу и отредактируйте в прямом эфире
Когда сервер запустится, HTML-страница откроется в вашем браузере по умолчанию (то есть Safari на Mac и Edge в Windows, если вы его не меняли). URL-адрес HTML-страницы будет выглядеть так: http://127.0.0.1:5500/index.html. Теперь щелкните правой кнопкой мыши на странице и выберите меню «Проверить» или «Проверить элемент», чтобы проверить ошибки консоли. Вы увидите, что ошибка CORS исправлена и все файл:/// Сообщения протокола исчезли. Это означает, что локальный сервер работает нормально и страница без проблем вызывает модуль JavaScript.
Исправлена ошибка CORS
Хорошая особенность расширения Live Server заключается в том, что вы можете редактировать контент в реальном времени. Просто измените любое содержимое вашего HTML-файла и сохраните его. Вы увидите, что страница автоматически перезагружается в браузере и отображает обновленное содержимое. Вы можете расположить код Visual Studio и приложения браузера рядом, чтобы быстро устранять неполадки на странице и получать результаты в реальном времени.
Проверьте результат в реальном времени с помощью VS Code и Safari
Закрытие локального сервера
Когда локальный сервер запущен, приложение Visual Studio Code отобразит «Порт: 5500» в правом нижнем углу. После завершения работы нажмите на опцию «Порт: 5500».
Закрыть локальный сервер
Это остановит/закроет локальный сервер, и вы увидите сообщение «Сервер теперь отключен».
Локальный сервер в автономном режиме
Заключительные слова
Это простой способ исправить ошибку «Доступ к сценарию по адресу «file:///…» из источника «null» заблокирован политикой CORS» без установки NPM или любой другой сложной среды локального сервера. Если вы делаете это разово, то после окончания работы удалите расширение.
