Laravel + Vite環境で、Laravelのサブドメインルートを使った際のVite開発サーバのCORS回避方法

この記事の目次

事象

Laravel + Vite環境でサブドメインルーティングを使って、複数のサブドメインのサービスをモノリポ……というか、一つのLaravelプロジェクトで管理したかった。
その際のCSSやJSのコンパイルの開発環境で使うViteのサーバ（localhost:5173）に、CSSやJSを取りに行くとCORSエラーが発生しCSSやJSの効果が反映されない。

解決方法

前提

Viteのサーバ（npm run devで起動するサーバ）は開発用なので本番運用しない。
localでの開発ではhostsにa.localhost, b.localhostなどのサブドメインを定義しているものとする
- なお、SwitchHostsを使うとこの辺の管理は便利です
サブドメインは決まっている

解決方法

vite.config.jsのserverの項目に以下のような設定を行います

cors: {
            // ここにドメインの数だけ定義を追加する
            origin: [
                'http://localhost',
                'http://a.localhost',
                'http://b.localhost',
            ],
            methods: ['GET', 'POST'],
            credentials: true
        }

全体のコードサンプル

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',

                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],

    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true,
        },
        cors: {
            origin: [
                'http://localhost',
                'http://a.localhost',
                'http://b.localhost',
            ],
            methods: ['GET', 'POST'],
            credentials: true
        }
    }
});