CORS policy errorの原因と解決策：Access-Control-Allow-Originの対処法

30秒でわかる原因と解決策

原因: ブラウザの同一オリジンポリシー（Same-Origin Policy）により、異なるオリジン（ドメイン、プロトコル、ポート）間でのリクエストが制限されているため。 解決策: APIサーバー側のレスポンスヘッダーに Access-Control-Allow-Origin を追加し、リクエストを許可するオリジンを指定する。

---

修正コード（Before / After）

❌ エラーが発生するコード

フロントエンド（例: http://localhost:3000）から、異なるオリジンのAPI（例: https://api.example.com/data）へ直接リクエストを送る場合。サーバー側でCORSの設定がされていないと、ブラウザがブロックします。

// フロントエンド (React / Vanilla JS)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => {
    // ❌ Access to fetch at '...' from origin '...' has been blocked by CORS policy
    console.error('Error:', error);
  });

⭕ 修正後の推奨コード

サーバー側（例: Node.js / Express）で、適切なCORSヘッダーを設定してリクエストを許可します。

// バックエンド (Node.js / Express)
const express = require('express');
const cors = require('cors'); // corsパッケージを使用する場合
const app = express();

// すべてのオリジンからのリクエストを許可（開発用）
app.use(cors());

// または特定のオリジンのみ許可する場合
// app.use(cors({ origin: 'http://localhost:3000' }));

app.get('/data', (req, res) => {
  res.json({ message: 'CORSの設定が成功しました！' });
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

---

よくある発生パターンと解説

CORS（Cross-Origin Resource Sharing）エラーは、Web開発において非常に頻繁に遭遇する問題です。主な発生パターンは以下の通りです。

1. 開発環境と本番環境のドメイン不一致 フロントエンドが localhost:3000 で、バックエンドが localhost:5000 のように、ポート番号が異なるだけでもブラウザは「別オリジン」とみなします。
2. プリフライトリクエスト（OPTIONS）の失敗 カスタムヘッダー（Authorization など）や POST/PUT メソッドを使用する場合、ブラウザは本番リクエストの前に OPTIONS メソッドで事前確認（プリフライト）を行います。サーバーがこれに対して適切なステータスコードやヘッダーを返さないとエラーになります。
3. 認証情報の送信（Credentials） CookieやAuthorizationヘッダーを含めてリクエストを送る場合、サーバー側で Access-Control-Allow-Credentials: true の設定と、許可する特定のオリジン（* は不可）の指定が必要です。

---

よくある質問 (FAQ)

Q1: Access-Control-Allow-Origin: * にすれば全て解決しますか？

A: 技術的には多くの公開APIで解決しますが、セキュリティ上のリスクがあります。認証情報（Cookieなど）を伴うリクエストでは * は使用できず、具体的なオリジンを指定する必要があります。

Q2: サーバーのコードを変更できない場合はどうすればいいですか？

A: 外部のサードパーティAPIなどでサーバー側を変更できない場合、開発環境においては「CORSプロキシ（例: cors-anywhere）」を経由させるか、フロントエンドのビルドツール（ViteやWebpack）のdevServer機能にある「proxy設定」を利用して回避するのが一般的です。