kasei_sanのブログ

かせいさんのIT系のおぼえがきです。胡乱の方はnoteとtwitterへ

Access-Control-Allow-Origin の値を動的に設定するときには、Vary 'Origin' も設定する必要があるよって話

これの続き

blog.kasei-san.com

Access-Control-Allow-Origin の値を動的に設定する必要があるパターン

複数のオリジンからクロスドメインのリクエストを受けるサーバが Access-Control-Allow-Origin を返す場合、オリジンごとに異なる値を動的に返す必要がある。

  • 参考: Nginxの場合のこんな感じの設定を書く

gist.github.com

その場合、CDNが問題になる

途中にCDNが挟まってる場合、Access-Control-Allow-Originが、最初に来たオリジンのままで固定されてしまう。

これにより、Access-Control-Allow-Originの値と異なるオリジンからのリクエストがすべて、CORSエラーになってしまう。

その対策

レスポンスヘッダに Vary 'Origin' を追加する。

Vary とは?

キャッシュ時にURL以外に、キーとなるリクエストヘッダの値を決める設定。 例えば Vary : Accept-Language とすると、同じURLでも、言語ごとにキャッシュされるようになる。

んで、Vary 'Origin' の場合、Origin がキーになる。 Origin は、クロスドメインのリクエストを投げた場合に、元々のドメインが格納されるリクエストヘッダ。

そうすれば、複数オリジンからのリクエストごとに、異なる Access-Control-Allow-Origin を返すレスポンスをそれぞれキャッシュできる。

参考

developer.mozilla.org

developer.mozilla.org

developer.mozilla.org

Access-Control-Allow-Origin の値が ("*" ワイルドカードではなく) 具体的なオリジンであるレスポンスをサーバーが送信する場合、レスポンスには Vary レスポンスヘッダーに Origin という値を設定して、 Origin リクエストヘッダーの値によって値が変わることをブラウザーに対して示してください。