ローカル開発環境でのCORS（localhost）

CORSとlocalhost

開発中、フロントエンドは通常http://localhost:3000で、APIはhttp://localhost:8080で実行されます。ポートがオリジンの一部であるため、これらは異なるオリジンであり、CORSが適用されます。

オプション1: localhostを許可オリジンに追加（開発環境のみ）

const allowedOrigins = process.env.NODE_ENV === "production"
  ? ["https://app.example.com"]
  : ["http://localhost:3000", "http://localhost:5173", "http://127.0.0.1:3000"];

app.use(cors({ origin: allowedOrigins, credentials: true }));

オプション2: フレームワーク開発プロキシ（CORSなし）

ほとんどのフロントエンドフレームワークは、APIリクエストを開発サーバー経由で転送する開発プロキシを提供しており、同一オリジンにします。

Vite:

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      "/api": "http://localhost:8080",
    },
  },
});

Next.js:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      { source: "/api/:path*", destination: "http://localhost:8080/api/:path*" },
    ];
  },
};

Create React App:

{ "proxy": "http://localhost:8080" }

オプション3: 開発環境でワイルドカード

app.use(cors({
  origin: process.env.NODE_ENV === "production" ? "https://app.example.com" : "*",
}));

localhost vs 127.0.0.1

http://localhost:3000とhttp://127.0.0.1:3000は異なるオリジンです。ブラウザがlocalhostにアクセスしていてもAPIの許可リストに127.0.0.1のみがある場合、CORSは失敗します。両方を含めるかプロキシを使用してください。

よくある落とし穴: IPv6

一部のシステムでは、localhostが127.0.0.1ではなく::1（IPv6）に解決されます。バックエンドが127.0.0.1のみでリッスンしている場合があります。curl -v http://localhost:8080で使用されるIPを確認してください。