はじめに

フロントエンド開発で、別リソースの情報を表示したいけどうまく表示されないことがよくあると思います。
そのときにブラウザコンソールに赤い文字で Access to fetched to fetched has been blocked by CORS policy error と出て「またか...」となったことは一度や二度ではないでしょう。

CORS についてよく分からなくても、使っているフレームワークとエラーメッセージの reason を組み合わせて検索すると解決策が見つかるため、よく分からないままで放置していませんか?
この記事では CORS エラーについてその原因と解消するための説明。が MDN にまとまっているのでそれを紹介します。

小噺

当初は、そもそも CORS とはなんぞやと言う解説も載せようと思いましたが、先週別のカレンダーでもっと分かりやすい記事が掲載されていましたので、エラー周りのみを取り上げています。
(アドベントカレンダーってこういうことがあるから怖いよね)

CORS とは

以下の記事がとても分かりやすかったので、参考として貼らせていただきます

本題

CORS エラー時には以下のページの CORS のエラーメッセージの章から、該当するエラーのページが確認できます。

( の記事へ直接飛ばなくても HTTP カテゴリーのページならどこでも、左の Table of contents の CORS エラー グループから探すことができます。

このページの利点は、

ブラウザコンソールに出てくるエラーメッセージがそのまま書いてあるので探しやすい。
CORS エラーについて網羅的 (なのかな?) に書かれている。
各ページには「何が悪いのか」「どうすれば解消するか」についてまとまっているので、何となくの理解で終わらない。

ので、エラーが出たときに google 先生に聞いて解消する前に、これらのページからより深い理解に繋げてみてはいかがでしょうか。

[補足] エラーにならないケース

この記事では CORS エラーを起点に解消するサイトを紹介しましたが、エラーにならないがクライアントで扱うためにサーバからの許可が必要なケースがあります。
それは JavaScript からのレスポンスヘッダーへのアクセスです。

通常、クロスオリジンからのレスポンスヘッダーは一部を除いて JavaScript から読み取ることができません。
そのまま取得しようとしても undefined 扱いになります。
これを JavaScript でも扱うためには、レスポンスヘッダーに Access-Control-Expose-Headers を加える必要があります。

例えば Content-Disposition ヘッダーからファイル名を取得したい場合は、以下のようなヘッダーをレスポンスに加える必要があります。
(複数ある場合は , で区切って指定可能です)

Access-Control-Expose-Headers: Content-Disposition

まとめ

MDN って良いよね