2024/02/13 22:13:39

ajax でクロスドメインする CORS(Cross-Origin Resource Sharing)

ウェブブラウザから JavaScript により XMLHttpRequest を飛ばす、いわゆる ajax において、ドメインの異なるサーバにリクエストをしてレスポンスを受け取る場合に、CORS(Cross-Origin Resource Sharing) という仕組みが必要になります。

CORS(Cross-Origin Resource Sharing)

例えば、example.com/index.html からホストが異なる b.example.com/foo への ajax 通信は、Same-Origin Policy のため不可能です。

# ajax 通信できない
example.com --> b.example.com

この制約をうまく回避する仕組みが、CORS(Cross-Origin Resource Sharing) です。

概要

サーバサイドで Access-Control-Allow-Origin ヘッダを吐きます。

全てのドメインからのリクエストを許容する

Access-Control-Allow-Origin: "*"

例: nginx の場合

add_header Access-Control-Allow-Origin *;

ドメインを指定してリクエストを許容する

Access-Control-Allow-Origin: "http://example.com"

複数ドメインを許容する場合、クライアントからの Origin ヘッダをみて、Access-Control-Allow-Origin ヘッダを返却するなどする。

サイト内検索