Failed to fetch - CORSポリシー違反の原因と解決策

概要

クロスオリジンリクエストがサーバーのCORSポリシーによりブロックされている場合に発生します。ブラウザのセキュリティ機能により、異なるオリジン（ドメイン・ポート・プロトコル）へのリクエストが制限されます。

この原因かどうかの確認方法

Consoleに以下のようなメッセージが出る場合、CORSが原因です:

Access to fetch at 'https://api.example.com' from origin 'https://your-site.com'
has been blocked by CORS policy

または:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

解決策

1. サーバー側でCORSヘッダーを追加（推奨）

Express.js:

1
2
3
4
5
6
7
8
9
const cors = require('cors');

// 特定オリジンのみ許可（推奨）
app.use(cors({
  origin: 'https://your-site.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

Django:

1
2
3
CORS_ALLOWED_ORIGINS = [
    "https://your-site.com",
]

Flask:

1
2
from flask_cors import CORS
CORS(app, origins=["https://your-site.com"])

Go (net/http):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
func corsMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Access-Control-Allow-Origin", "https://your-site.com")
        w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")
        if r.Method == "OPTIONS" {
            w.WriteHeader(http.StatusOK)
            return
        }
        next.ServeHTTP(w, r)
    })
}

Nginx:

1
2
3
4
5
6
7
8
9
location /api/ {
    add_header 'Access-Control-Allow-Origin' 'https://your-site.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

2. 開発環境ではプロキシを使用

Vite:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
}

Next.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:5000/api/:path*'
      }
    ]
  }
}

よくある間違い

Access-Control-Allow-Origin: * を本番環境で使用する（セキュリティリスク）
credentials: true と Access-Control-Allow-Origin: * を同時に使用する（動作しない）
OPTIONSプリフライトリクエストを処理していない

まだ解決しない場合

→ 診断ハブに戻る

Failed to fetch - CORSポリシー違反

概要