【JavaScript入門】CORSとは？仕組み・エラー原因・解決方法を初心者向けにわかりやすく解説

CORS（クロスオリジン）は、ブラウザが異なるドメインへのアクセスを制御するための重要なセキュリティ仕組みです。
この記事では、CORS が必要な理由から Access-Control-Allow-Origin の仕組み、プリフライトリクエストの役割、そしてローカル開発での対処法まで、API 通信で必ず理解しておきたいポイントを分かりやすく解説します。

CORS（クロスオリジン）とは？

CORS（Cross-Origin Resource Sharing） とは、
ブラウザが「異なるオリジン（ドメイン）」へのアクセスを制御する仕組みです。

オリジンは以下の3つで構成されます：

• プロトコル（https / http）
• ドメイン（example.com）
• ポート番号（:3000 など）

この3つのうち1つでも違うと「別オリジン」とみなされます。

なぜ CORS が必要なのか？

もしブラウザが自由に他サイトへアクセスできたら、
悪意あるサイトがユーザーの代わりに勝手に API を叩くことができます。

これを防ぐために、ブラウザは
「サーバーが許可した場合のみ」 他オリジンへのアクセスを許可します。

CORS エラーの典型例

Access to fetch at 'https://api.example.com' 
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present...

これは「サーバー側が許可していないため、ブラウザがブロックした」という意味です。

Access-Control-Allow-Origin の仕組み

サーバーがレスポンスヘッダーに以下を付けると、
ブラウザはアクセスを許可します。

Access-Control-Allow-Origin: https://example.com

すべてのオリジンを許可する場合は：

Access-Control-Allow-Origin: *

ただし、認証情報（Cookie）を含む場合は * は使えません。

プリフライトリクエスト（OPTIONS）とは？

特定の条件を満たすリクエストは、
本番のリクエストの前に OPTIONS メソッド が送られます。

これを「プリフライトリクエスト」と呼びます。

プリフライトが発生する条件

• Content-Type が application/json
• PUT / DELETE などの特殊メソッド
• 独自ヘッダーを送る場合

プリフライトに対してサーバーが正しく返さないと、
本番リクエストは実行されません。

fetch で CORS エラーが起きる例

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data));

サーバーが CORS を許可していないと、
ブラウザがブロックしてエラーになります。

ローカル開発での CORS エラー対処法

① サーバー側で CORS を許可する（最も正しい方法）

例：Node.js（Express）

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());

② プロキシを使う（React / Vue で一般的）

例：React（vite.config.js）

server: {
  proxy: {
    "/api": "https://example.com"
  }
}

③ ブラウザ拡張機能で一時的に回避（開発時のみ）

本番では絶対に使えませんが、
開発中の動作確認には便利です。

絶対にやってはいけない対処法

• フロント側で CORS を無効化しようとする（不可能）
• Access-Control-Allow-Origin: * を本番で使う
• サーバー側の認証情報を無制限に許可する

CORS は「ブラウザが守るセキュリティ」なので、
フロント側では解除できません。

まとめ

CORS はブラウザがユーザーを守るための仕組みで、
サーバー側が許可しない限り他オリジンへアクセスできません。

• Access-Control-Allow-Origin が鍵
• プリフライト（OPTIONS）が発生することがある
• fetch の CORS エラーはフロント側では解決できない
• 開発ではプロキシが便利

API通信を扱うなら、CORS の理解は必須です。