JavaScript 逆引き集 | CORS の基礎知識（ブラウザ側）

ポイントまとめ

CORS（Cross-Origin Resource Sharing）は「異なるオリジン（ドメイン・ポート・プロトコル）の間で安全にリソースを共有する仕組み」です。ブラウザの fetch では mode:'cors' を指定することで、サーバーが許可していればクロスオリジン通信が可能になります Qiita Scrapbox Qiita。

まず理解すべきこと

• 同一オリジンポリシー: ブラウザはセキュリティのため「同じオリジン」以外へのアクセスを制限します。
  • オリジン = プロトコル + ドメイン + ポート
  • 例: https://example.com:443 と http://example.com:80 は別オリジン。
• CORS: サーバーが特定のオリジンからのアクセスを許可する仕組み。HTTPレスポンスに Access-Control-Allow-Origin ヘッダが必要。

fetch の mode 設定

基本のコード例

// クロスオリジン通信（サーバーがCORS対応している必要あり）
fetch("https://api.example.com/data", {
  method: "GET",
  mode: "cors"
})
  .then(res => res.json())
  .then(data => console.log("取得成功:", data))
  .catch(err => console.error("エラー:", err));

// クロスオリジン通信（サーバーがCORS対応している必要あり）
fetch("https://api.example.com/data", {
  method: "GET",
  mode: "cors"
})
  .then(res => res.json())
  .then(data => console.log("取得成功:", data))
  .catch(err => console.error("エラー:", err));

よく使うテンプレート集

JSON API にアクセス

fetch("https://api.example.com/users", {
  method: "POST",
  mode: "cors",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Aki" })
});

fetch("https://api.example.com/users", {
  method: "POST",
  mode: "cors",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Aki" })
});

Cookie を含める場合

fetch("https://api.example.com/secure", {
  method: "GET",
  mode: "cors",
  credentials: "include" // Cookie送信を許可
});

fetch("https://api.example.com/secure", {
  method: "GET",
  mode: "cors",
  credentials: "include" // Cookie送信を許可
});

例題: ローカル開発での CORS エラー

// フロント: http://localhost:3000
fetch("http://localhost:8080/api/users", { mode: "cors" });

// フロント: http://localhost:3000
fetch("http://localhost:8080/api/users", { mode: "cors" });

• サーバーが Access-Control-Allow-Origin: http://localhost:3000 を返さないとエラーになる。
• 解決方法: サーバー側で CORS 設定を追加する必要がある。

💡 実務でのコツ

• ブラウザ側は設定だけ: 実際に許可するかどうかはサーバー次第。
• no-cors はほぼ使わない: レスポンスが読めないので実用性が低い。
• 開発時の典型的なエラー: 「No ‘Access-Control-Allow-Origin’ header is present」→ サーバー側設定不足。

直感的な指針

• 同一オリジンポリシーが基本。
• CORS はサーバーが許可して初めて動く。
• ブラウザ側では mode:'cors' を指定するだけ。
• Cookie を送るなら credentials:'include' も忘れずに。

これを覚えれば「なぜクロスオリジンでエラーが出るのか」「どう設定すれば通信できるのか」が理解でき、初心者でも CORS の仕組みを安心して扱えるようになります。