CORSをPages Functionsで有効にするにはどうすればいいですか？

Benjamin Carter

8 分読む

Spt 5, 2025

クロスオリジンリソースシェアリング（CORS）は、ブラウザによって実装されたセキュリティメカニズムであり、ウェブアプリケーションが異なるオリジンからのリソースとどのように相互作用するかを制御します。デフォルトでは、同一オリジンポリシーにより、ウェブページは自身のドメイン以外のサーバーへのリクエストを制限されます。CORSは、サーバーがHTTPヘッダーを介してどのオリジンがリソースにアクセスできるかを指定することに、これらの制限を緩和します。

CORS応答ヘッダーの主な種類とその機

Access-Control-Allow-Origin: リソースにアクセスを許可するオリジン指定します。*を使用するとすべてのオリジンが許可されます（機密データには推奨されません）。特定のオリジンを指定する（例: https://app.example）はセキュリティを向上させます。
Access-Control-Allow-Methods: リソースにアクセスする際に許可されるHTTPメソッドのリスト（例: GET, POST, PUT,, DELETE, OPTIONS）。
Access-Control-Allow-Headers: 実際のリクエストに含めることができるカスタムヘッダー（例: Authorization, Content-Type, X-CSRF-Token）を指定します。
Access-Control-Allow-Credentials: 認証情報（クッキーやHTTP認証など）が許可されるどうどうをを示示。trueに設定する必要があり、明示的な（非*）オリジンとともにのみ使用できます。
Access-Control-Max-Age: プリフライトリクエストの結果がブラウザによってキャッシュされる時間（秒単位）を定義します（例: 86400は24時間）。

リクエストが「非シンプルリクエスト」（カスタムヘッダーを使用したり、GET/POST以外のメソッドを使用したりする場合）と見なされると、ブラウザは自動的にプリフライトOPTIONSリクエストをサーバーに送信します。サーバーは適切なCORSヘッを返さなければならず、そうでない場合、ブラウザは実際のリクエストをブロックします。

Pages Functionsによるクロスオリジン問題の解解

Pages Functionsは、EdgeOneエッジノードで行されるサーバーレスのコード実環境を提供します。開発者はビジネスロジックを書き、トリガールールを設定するだけで、サーバーインフラストラクチャの管理は不要です。コードは、エンドユーザーに近いエッジノードで弾力的かつ安全に実行されます。

<>ヘッダーAPIを介したCORSの解決

典型的なコード例:

// functions/apihello.ts
export async function onRequest({ request }) {
  const origin = request.headers.get("Origin");
  // ビジネスロックまたは上流リクエストのプロキシ
  response = await fetch(request);

  CORS応答ヘッダーを設定
  response.headers.set("Access-Control-Allow-Origin", origin || "*");
  response.headers.setAccess-Control-Allow-Methods", "GET, POST, OPTIONS");
  response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");
  response.headers.set("Access-Control-Max-Age", "86400");

  return response;
}

注意: 認証情報（クッキーなど）をサポートする必要がある場合は、Access-Control-Allow-Originを特定のドメインに設定し、Access-Control-Allow-Credentials:trueを追加必要があります。

ジオロケーションに基づくCORS

EdgeOneのジオロケーションデータを使用して、地域特有のCORSポリシーを実装することもできます:

// functions/api/hello.ts
export async function onRequest({ request }) {
  const origin = request.headers.get("Origin");
  const country = (request.eo.geo && request.eo.geo.country) || "US";

  const corsMap = {
    US: { origins: ["https://us.example.com"], credentials:: },
    CA: { origins: ["https://ca.example.com"], credentials: true },
    EU: { origins: ["https://eu.example.com"], credentials: true },
  };
  const region = corsMap[country] || { origins: ["https://global.example.com"], credentials: false };
  const isAllowed = origin && region.origins.includes(origin);

  const headers = {
    "Access-Control-Allow-Origin": isAllowed ? origin : "null",
    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Credentials": region.credentials.toString(),
    "Access-Control-Max-Age": "86400",
  };

  if (request.method === "OPTIONS") {
    return new Response(null, { status: 204 headers });
  }

  return new Response(JSON.stringify({ country }), {
    headers: { ...headers, "content-type": "application/json; charset=UTF-8" },
  });
}

セットアップをテストする

# プリフライト
curl -i -X OPTIONS https://your-domain.edgeone.app/api/hello \
  -H "Origin: https://app.example" \
  -H "Access-Control-Request-Method: POST"

# シンプルリクエスト
curl -i https://your-domain.edgeone.app/api/hello \
  -H "Origin: https://app.example"

OPTIONS呼び出しで200ステータスを確認し、両方の応答に正しいCORSヘッダー含まれているかを確認してください。

一般的なCORSシナリオと解決策

ローカルフロントエンド開発から API を呼び出すときの CORS エラー: API サーバーには、ローカル開発ドメインを許可する CORS ヘッダーを含める必要があります。
あなたのAPIを統合するサードパーティアプリプリケーションーション: Originを動的に判定し、必要に応じて対応するCORSヘッダーを返してセキュリティを強化します。
認証付きクロスオリジンリクエストのサポート: Access-Control-Allow-Credentialsはtrueに設定する必要があり、Access-Control-Allow-Originは*にはできません。

要約

CORSは、フロントエンド/バックエンドの分離やマイクロサービスアーキテクチャにおいて避けられない問題です。EdgeOne Pages FunctionsでCORS応答ヘッダーを柔軟に設定することで、クロスオリジンアクセスの要件を効率的かつ安全に解決できます。より複雑なシナリオでは、環境変数、KVストレージ、その他の機能を活用して、動的な承認やパーソナライズされたクロスオリジン戦略を実装できます。

高度な使用法については、Pages Functionsドキメントu>を参照してください。