CORSのエラーが出た時の対処法 - Laravel 9.x Sail + Bootstrap on Windows

発生した環境

WSL2でDocker Desktop for WindowsでLaravel9でSailでbootstrapな環境で、うぷぷうぱうぱ。

###ホスト

• OS: Windows 10 Pro
• Docker: Docker Desktop 4.17.0
• Laravel: Laravel 9.x
• WSL: Ubuntu 22.04

Sail (Docker コンテナ)

• sail 8.0
• pgsql
• mailpit

発生までの手順

ざっくりコマンドだけ羅列しますが、

composer create-project . "9.*"
composer require laravel/sail --dev
composer require laravel/ui --dev
php artisan sail:install
vi docker-compose.yml
sail up -d
sail composer update
sail php artisan ui bootstrap --auth
sail npm install
sail npm run dev

とこんな感じです。

ここで、http://localhost/ は、普通に見れますが、例えば /login とか、bootstrapのCSS使ってるようなページを開くと、スタイルが適用されずに表示されます。

Firefoxのウェブ開発ツールからコンソールみると

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://0.0.0.0:5173/@vite/client にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が成功しなかった)。ステータスコード: (null)

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://0.0.0.0:5173/resources/js/app.js にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が成功しなかった)。ステータスコード: (null)

の２つが出ていた。

ググってると、以下の記事を見つけた。
GitHub | Windows - Failed to load when loading vite dev server resources #28

私の環境で解決した方法

上記ページにもあるが、vite.config.js に以下のようにserver部分を追加した。

vite.config.js

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
         host: 'localhost',
        },
    },
});

作者曰く、どうやらWindowsではIP(0.0.0.0)で通信出来ないことに起因してるらしい（jessarcher commented on Jun 28, 2022）。
localhostを127.0.0.1に変更してもエラーは解消された。

この情報がどこかの誰かに役に立つといいな。