Почему проект, собранный через vite не позволяет открыть сборку локлаьно через index.html?

Question

[Narts]

Есть два проекта: на create-react-app (webpack) и на vite.
Когда я открываю index.html cra проекта, то все открывается корректно.
Когда я открываю index.html vite проекта, то проект не открывается, тк ругается cors, что < script > обращается к файлу через file:// протокол. НО cra билд тоже обращается к скрипту через file:// протокол и там все корректно работает.

Скрипт в cra подключается так:

<script defer="defer" src="./static/js/main.6e4ab559.js"></script>

Скрипт в vite подключается так:

<script type="module" crossorigin src="./index-fa54eb2f.js"></script>

Запрос к cra скрипту выглядит так:

Referer: 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Запрос к vite скрипту так:

Origin: null
Referer:
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

и так как ошибка выкидывается такая: "Access to script at '...t/dist/index-fa54eb2f.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.", полагаю что проблема именно в Origin: null, но как его убрать при сборке проекта?

Comments

[Антон Антон]

он добавляется из-за type="module", а вот как убрать - не знаю. вероятно через настройки vite, где-нибудь в https://vitejs.dev/config/build-options.html#build... можно подкрутить, чтобы получался commonjs и подключить после этого аналогично вебпаку

[Александр]

Зачем вообще открывать такие вещи через файл? А запросы любые как будут обрабатываться?

[Narts]

Александр, это уже другой вопрос) щас не могу понять почему cra открывается, а vite нет

Answer 1

[Aetae]

Почему?
Потому что в классическом виде это один js файл подключённый через script, а в виде модулей - это множество файлов которые дополнительно грузятся внутри script. Ограничения безопасности браузеров по разному работают в данных ситуациях.

Что делать?
Не открывать современные приложения локально. Просто забудь о такой возможности. Установи глобально какой-нить alive-server и запуская через него. Если надо это распространять - прилагай микросервер в комплекте или смотри в сторону всяких виндовых однофайловых вариантов\pdf.

Comments

[Narts]

Привет! В билде у меня всего один файл с js, который подключается через тег script. Я еще понял бы, если скрипт через тег script подключался корректно, а внутренние подключения скриптов (которые уже в коде через fetch цепляются) выкидывали бы ошибку корс. Но в моем случае даже через тег скрипт выкидывает корсы.

Правильно ли я понял, браузеры по разному фетчат скрипты из script src, в зависимости от type? если type=module, то скрипт фетчится одним способом, если common, то другим способом. то есть это на уровне браузера, верно?

[Aetae]

Narts, верно то, что оно на уровне браузера, а уж как оно там внутре себя ведёт можно только в сорцах увидеть. Может быть и так, что там тупо проверка вида: "type module? локально? или нафиг.".

Ограничения для локальных файлов не продиктованы никакой спецификацией или очевидной логикой, они продиктованы особенностями конкретных реализаций конкретных браузеров и желаниями левой пятки произвольных разработчиков. Именно потому я и рекомендую забыть о локальных файлах.

[Narts]

Aetae, спасибо

Answer 2

[svm2001]

Для просмотра билд версии в vite используется команда `npm run preview`.
Файлы из папки dist/build можно открыть только через любой live-server. Я через webstrom открывал - все работало.