Allow-Origin の末尾に / が付いている

オリジンをブラウザのアドレスバーからコピーして、末尾のスラッシュごと設定してしまった例です。見た目は正しくても CORS チェックが一致しない理由を、A と B の比較で確かめます。

入力

Access-Control-Allow-Origin: https://app.example.com/
Access-Control-Allow-Credentials: true

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true

つき(Cookie や認証情報を送る。fetch の credentials: include など)

エラー 1 件・警告 0 件・情報 0 件

エラー A: Access-Control-Allow-Origin 「https://app.example.com/」はオリジンの形ではありません。オリジンは https://example.com のように「スキーム://ホスト(:ポート)」だけで、末尾の / やパスは付けません。CORS チェックはリクエストのオリジンと値を照らすため、一致せず失敗します(Fetch Standard 3.3.4・4.10)。

ヘッダーごとの差分
ヘッダー	A(変更前)	B(変更後)	差分
Access-Control-Allow-Origin	https://app.example.com/	https://app.example.com	https://app.example.com/ → https://app.example.com
Access-Control-Allow-Credentials	true	true	同じ
Access-Control-Allow-Methods	(なし)	(なし)	(どちらもなし)
Access-Control-Allow-Headers	(なし)	(なし)	(どちらもなし)
Access-Control-Max-Age	(なし=既定 5 秒)	(なし=既定 5 秒)	同じ(有効な値 5 秒)
Access-Control-Expose-Headers	(なし)	(なし)	(どちらもなし)

オリジンは「スキーム://ホスト(:ポート)」だけで、パスや末尾の / は含みません(Fetch 3.3.4)。CORS チェックはリクエストのオリジンと値を照らす(4.10)ため、A は一致せずエラー 1 件です。B は問題なしで、差分は Allow-Origin の 1 項目です。

判定の根拠は仕様と根拠に、仕様の出典とともにまとめています。自分の入力で試すにはツールをお使いください。

実際のサーバーへ接続してヘッダーを取得する機能はありません。貼り付けた文字だけを読みます。
Vary: Origin など Access-Control-* 以外のヘッダーとの組み合わせ(CDN のキャッシュを含む)は判定せず、読み飛ばします。
preflight(OPTIONS)の応答か通常の応答かは区別しません。Allow-Methods・Allow-Headers・Max-Age は preflight の応答で使われるヘッダーです。
リクエスト側の Origin・メソッド・ヘッダーとの突き合わせ(この設定で実際にそのリクエストが通るか)まではしません。

ご利用にあたって