Access to fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header の原因と解決策

概要

CORSエラーは、ブラウザが異なるオリジン（ドメイン、プロトコル、ポート）へのリクエストをブロックした場合に発生します。セキュリティ機能であり、サーバー側の設定が必要です。

エラーメッセージ

Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
on the requested resource.

原因

ブラウザのセキュリティポリシーにより、異なるオリジンへのリクエストにはサーバーの明示的な許可が必要です。

解決策（サーバー側）

1. Node.js / Express

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const express = require('express');
const cors = require('cors');
const app = express();

// すべてのオリジンを許可
app.use(cors());

// 特定のオリジンのみ許可
app.use(cors({
  origin: 'https://myapp.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));

2. Nginx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
server {
    location /api/ {
        add_header 'Access-Control-Allow-Origin' 'https://myapp.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';

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

3. PHP

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php
header('Access-Control-Allow-Origin: https://myapp.com');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Credentials: true');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

4. Django

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# settings.py
INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS = [
    'https://myapp.com',
]

5. Laravel

1
2
3
4
5
6
7
8
// config/cors.php
return [
    'paths' => ['api/*'],
    'allowed_origins' => ['https://myapp.com'],
    'allowed_methods' => ['*'],
    'allowed_headers' => ['*'],
    'supports_credentials' => true,
];

解決策（開発時のみ）

1. プロキシを使用（推奨）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

2. ブラウザ拡張機能

開発時のみ、CORS無効化の拡張機能を使用（本番では使用不可）。

注意点

Access-Control-Allow-Origin: * は認証情報（credentials）と併用不可
プリフライトリクエスト（OPTIONS）への対応が必要
セキュリティを考慮し、本番環境では特定のオリジンのみ許可

Access to fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

概要

エラーメッセージ

原因

解決策（サーバー側）

1. Node.js / Express

2. Nginx

3. PHP

4. Django

5. Laravel

解決策（開発時のみ）

1. プロキシを使用（推奨）

2. ブラウザ拡張機能

注意点

関連エラー

関連エラー

JavaScript の他のエラー