WebのCORSとは？

—

by

ai
in
日々の備忘録 > web > WebのCORSとは？

WebのCORSとは？

Cross-Origin Resource Sharing（CORS）は、Webブラウザが異なるオリジン（ドメイン、プロトコル、ポート）が持つリソースへ安全にアクセスできるようにする仕組みです。ブラウザはデフォルトで同一生成元ポリシー（Same-Origin Policy）を適用し、異なるオリジンへのリクエストはブロックします。CORSはサーバ側が特定のヘッダーを返すことで、ブラウザに「このリソースは許可されたオリジンからのアクセスを認める」ことを伝えます。

同一生成元ポリシー

同一生成元ポリシーは、Webページが読み込まれたオリジンと異なるオリジンのリソース（例: API、画像、スクリプト）への読み取り操作を制限します。これにより、悪意のあるサイトがユーザーの認証情報を使って別サイトのデータを取得することを防止します。

CORSが解決する課題

開発者が外部APIやマイクロサービス間でデータをやり取りしたい場合、同一生成元ポリシーが障壁となります。CORSは以下のようなシナリオを可能にします。

  • フロントエンド（例: https://app.example.com）からバックエンド（例: https://api.example.com）への AJAX リクエスト
  • サードパーティ CDN からのフォントや画像の取得
  • モバイルアプリが WebView を介して Web API にアクセスする場合

主要な CORS ヘッダー

  • Access-Control-Allow-Origin – 許可するオリジン（”*” は全オリジン）
  • Access-Control-Allow-Methods – 許可する HTTP メソッド（GET,POST など）
  • Access-Control-Allow-Headers – クライアントが送信できるカスタムヘッダー
  • Access-Control-Allow-Credentials – クッキーや認証情報を含めるかどうか（true／false）
  • Access-Control-Max-Age – プリフライトレスポンスをキャッシュする秒数

簡単な実装例（Node.js / Express）

// Node.js (Express) の例
const express = require('express');
const app = express();

app.use((req, res, next) => {
  // すべてのオリジンを許可（本番環境では特定のオリジンに絞る）
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // プリフライトリクエスト（OPTIONS）の場合はすぐに 204 を返す
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello CORS' });
});

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

まとめ

CORS は「安全に」クロスオリジン通信を可能にするブラウザ標準の仕組みです。サーバ側で適切なヘッダーを設定し、クライアント側では必要に応じて credentials オプションを使用することで、モダンな分散アーキテクチャを実装できます。

Views: 5