Vite+Firebaseで躓いた話

はじめに

Vite + Firebaseの環境で、FirebaseのRealtime Databaseに接続できない問題発生したので、それを解決する。

詳細

Vite + TypeScript + Firebaeがベースの環境で、Phaser3を追加し、マルチプレイができるゲームを簡単に作ろうとしていた。
Viteのdev環境でRealtime Databaseにアクセスしようとすると、net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 (OK)とレスポンスエラーが出る。
ビルドしたものは正常に動作する。

結論

Viteのdev環境でのデフォルトのポート番号が悪さしてるっぽい？
vite.config.tsに以下のように追記。

vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    assetsInlineLimit: 0,
  },
  base: "/phaser-multiplayer-test/",
  envDir: "./",
+ server: {
+   port: 5500,    //デフォルトは5173
+ },
});

よくわからんけど動いたからOK！