Можно ли запустить vite так, чтобы в режиме разработки (с наблюдением за изменением кода) пересобирались файлы?

Question

[Александр Воробьев]

Есть, уже существующий сайт. Генерирует страницы на PHP. Один из разделов будет представлять из себя SPA. Для этого используется vue3 (и vite). Сайт выступает в качестве бека. Для работы с беком используется axios. При этом есть данные, которые передаются в обе стороны через http заголовки. Сайт локально (на машине разработки) поднят на домене mysite.loc (используется apache).

В package.json прописаны стандартные скрипты:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

Итак запускаю проект в режиме разработки yarn dev SPA запускается на localhost:5173 и вот тут начинаются проблемы из-за CORS. Запустить приложение на сайте я не могу, т.к. в dev файлы не генерируются, в каталоге назначения. Т.е. запускаю на указанном. Приходится ставить временный костыль на стороне бека разрешающий запросы с этого адреса. Но вот не могу разрешить заголовки. Точнее так: исходящие от бека заголовки видны в браузере, но axios их не показывает.. входящие (с фронта) так же не могу получить на беке так же не могу настроить (да и вообще не хотелось бы на беке специальные правки вносить)...

Можно ли запустить vite так, чтобы в режиме разработки (с наблюдением за изменением кода) пересобирались файлы? (автообновлением спа в браузере я готов и пожертвовать)

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

[iljaGolubev]

У вас dev localhost:5173 приложение смотрит на боевой бэк? так не нужно делать.
А если бэк тоже dev, то разрешите там запросы с localhost - это должно решаться в конфиге а не в коде.

сходящие от бека заголовки видны в браузере, но axios их не показывает

вообще магия. что-то у вас в корне не так с проектом.

[Александр Воробьев]

iljaGolubev, нет конечно. Это не боевой бек. Это машина разработки..

Т.е. настроить в .htaccess разрешения. Дописав необходимые заголовки? (попробую почитать про это)

Проект уже совсем "простой" -только что созданное vue приложение а на беке скрипт

header('Access-Control-Allow-Origin: http://localhost:5173');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
        header('Access-Control-Allow-Credentials: true');
        header("Access-Control-Allow-Headers: VasoftTest");
        header('VasoftTest: example');

[iljaGolubev]

порт может меняться, так что лучше Access-Control-Allow-Origin: *
у вас апач?

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>
// и проверьте что mod_headers есть и включён

[iljaGolubev]

https://vitejs.dev/config/server-options.html#serv... - можно запустить vue сайт на mysite.loc

а ещё https://vitejs.dev/config/server-options.html#serv...

[Александр Воробьев]

iljaGolubev, да это все видел. Хост сменить можно, но не решает проблему корса. Возможно где то что то не докрутил. Сейчас пока вообеще перестает отвечать :)

[Александр Воробьев]

iljaGolubev, сейчас такая ситуация. В htaxess (без звездочки т.к. с ней надо отключать credentials)

access-control-allow-credentials: "true"
access-control-allow-headers: "Authorization, Origin, X-Requested-With, Accept, Content-Type, Vasoft-Test"
access-control-allow-methods: "GET, POST, PUT, DELETE"
access-control-allow-origin: "http://localhost:5173"

во vue сделал так

const get = (uri, data) => {

        const promise2 = axios.get(uri,{
            headers: {
                'Vasoft-Test': 'test'
            }
        });
        const promise = axios.get(uri);
        promise.then(result => {
            console.log('>>>>',result.headers)
        })
        return promise;
    }

на беке header('Vasoft-Test: test2');
Если смотреть localhost:5173 то promise2 выдает ошибку CORS, promise не видит заголовка. выводит только cache-control, content-type, expires,pragma

Пошел другим путем, там где билдятся продуктовые в index.html поправил путь

<script type="module" src="http://localhost:5173/build/@vite/client"></script>
    <script type="module" crossorigin src="http://localhost:5173/build/src/main.js"></script>

Там уже нет ошибок cors... И больше заголовков выводит, в т.ч те которые задал в htaccess и Vasoft-Test тоже...... Вероятно вот это выход в моем случае, правда надо руками править перед началом разработки, и в браузере не работает уже плагин Vue

[iljaGolubev]

Александр Воробьев, это выход ... из профессии =)
если у вас 2 сайта (бэк и фронт) на одном домене и срабатывает cors - точно что-то не так делаете.

[Александр Воробьев]

iljaGolubev, ну я такого не говорил :) localhost и mysite.loc хоть и на одном компе, но разные домены. Впрочем задача уже решена (с подробностями в комменте к ответу Антон Антон.

Answer 1

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

Один из способов решения проблемы cors на dev сервере такой:
Путь до бека хранить в двух файлах: .env.local и .env.development.local
https://vitejs.dev/guide/env-and-mode.html#env-files

сделать два параметра:
VITE_APP_API
и API_PROXY
в .env.development.local в качестве VITE_APP_API указывать /api а в качестве API_PROXY - путь до реального api а в .env.local использовать только параметр VITE_APP_API с url реального api

в конфиге загрузить соответствующие .env файлы https://vitejs.dev/config/#using-environment-varia... и настроить прокси до апи: https://vitejs.dev/config/server-options.html#serv... если есть env.API_PROXY

Comments

[Александр Воробьев]

Все отлично. Почти так и сделал. За исключением того что переменные окружения не нужны

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({command, mode}) => {
    let proxy = mode === 'development'
        ? {
            '^/example/.*': {
                target: 'https://mysite.loc/',
                changeOrigin: true,
                secure: false,
                rejectUnauthorized: false,
            }

        }
        : {};
    return {
        plugins: [
            vue(),
        ],
        base: '/',
        server: {
            proxy: proxy,
            cors: false,
            watch: {
                usePolling: true,
            }
        },
        build: {
            outDir: '../../../build/',
            emptyOutDir: true,
            minify: mode !== 'development',
            rollupOptions: {
                output: {
                    assetFileNames: '[ext]/[name][extname]',
                    chunkFileNames: 'js/[name].js',
                    entryFileNames: 'js/app.js'
                }
            }
        }
    }
});

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

Александр Воробьев, они не нужны пока не началась совместная разработка в гите. прибивать пути в коде прям плохая идея.

[Александр Воробьев]

Антон Антон, да понимаю. особенность данного проекта такова, что появление команды это маловероятно :)... Это я себе делаю систему учета задач/проектов/времени и бухгалтерию. (в общем личная кухня взаимодействия с клиентами)

Если же представить, что команда появилась, то уже без проблем вынести можно, в .env.*