ローカル開発で CORS エラーが出る原因と 3つの回避策｜Vite / Express 実践設定

CORS フロントエンド エラー解決 開発 Vite
結論：30秒でローカル CORS エラーを解決する
  • 原因: ポート番号の違い（localhost:3000 ⇄ localhost:8080）
  • 解決策1 (推奨): Vite Dev Server Proxy でオリジン偽装
  • 解決策2: バックエンドに Access-Control-Allow-Origin: http://localhost:3000

1. なぜ localhost 同士でエラーになるのか？

フロントエンド API サーバー
http://localhost:3000 http://localhost:8080
ポート3000 ポート8080 → 別オリジン判定

2. 回避策1：フロントエンドの Dev Server Proxy（最推奨）

バックエンドのコードを変更せず、開発サーバー経由で同律オリジンリクエストに見せかける手法です。

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});

3. 回避策2：バックエンドで開発環境のみ Allow-Origin 設定

// Express.js
import cors from 'cors';

app.use(cors({
  origin: process.env.NODE_ENV === 'development' 
    ? 'http://localhost:3000' 
    : 'https://app.example.com',
  credentials: true,
}));

4. 注意点（ハマりどころ）

  1. Access-Control-Allow-Origin: * と credentials: true の併用不可
    • Cookie や Authorization ヘッダーを送信するリクエストで Allow-Origin: * を設定すると、ブラウザがセキュリティエラーを起こします。明示的に http://localhost:3000 を返してください。