10行でわかるCORSエラー
CORSとはなにか、CORSエラーがなぜ起こるかの簡単な解説です。
CORS(Cross Origin Resource Sharing) とは
ブラウザが今開いているサイト(サイトA)以外のサイト(サイトB)に Fetch/HttpXMLRequest を使ってリクエストを送信できるようにする仕組み。
CORSのリクエストの順番
- ブラウザはサイトBに送信するリクエストに、サイトAを開いているという情報を
Origin
ヘッダとして追加する - サイトBは、リクエストの
Origin
ヘッダを見て、サイトBとは別ドメインであることを確認する。 - サイトBは、サーバーに設定されている
Access-Control-Allow-Origin
等のCORSに関する設定をヘッダに含めたレスポンスを200で返す。 - ブラウザはレスポンスの
Access-Control-Allow-Origin
を見て、サイトAのドメインが含まれているか確認する。 - サイトAのドメインが含まれていればアプリケーションのリクエストをサイトBに送信する。
- サイトAのドメインが含まれていなければ、CORSエラーになる。
まとめ
エラーが起こるのはブラウザ側、設定が必要なのは外部サーバー(サイトB)側。 ということを覚えておけば大丈夫です。
APIを提供しているような会社はサーバーにCORSの設定を追加する必要があります。
