Laravel9リモート開発時のvite.config.js設定

Laravel9でArtisan開発サーバを起動してFireFoxからリモート接続すると、次のようなエラーが発生しました。

  
  ページの読み込みが完了する前にレイアウトの開始が強制されました。スタイルシートがまだ読み込まれていない場合、スタイル付けされていないコンテンツがちらつく原因となる可能性があります。 node.js:393
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://127.0.0.1:5173/@vite/client にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が成功しなかった)。ステータスコード: (null)
  

試しにChomeで表示すると、エラー内容が少し違います。

  
 Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
  

原因

開発ホストのファイアウォール設定とLaravel9プロジェクトのvite設定に問題がありました。CORSは関係ありませんでした。
まず、viteが使用するポート(デフォルト5173)を開放します。RHEL系はfirewall-cmdでポートを開放します。

  
#firewall-cmd --zone=public --add-port=5173/tcp --permanent
#firewall-cmd --reload

次に、Laravel9プロジェクトのvite.config.jsにサーバのホスト設定(ここでは192.168.0.4)を追加します。

  
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'


export default defineConfig({
    server: {
        host: "192.168.0.4",
        port: "5173",
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
       vue()
    ],
});