CORS(Cross-Origin Resource Sharing)を詳細に徹底解説
スポンサードリンク
おはようございます。Shotaです。
今回の記事では、CORSについて詳細に徹底解説します。
CORSとは
CORS(Cross-Origin Resource Sharing)とは、簡単に言えばWebページ上に書かれている情報がWebブラウザから別のサーバへアクセスできるようにすることを意味します。
Webアプリは、自分とは異なるオリジン(より詳細に言えばドメイン、プロトコルやポート番号)にあるリソースをリクエストする際に、オリジン間でHTTPリクエストを実行します。
セキュリティ上の理由から、ブラウザは別のサーバからのHTTPリクエストを制限しています。つまり、あるサーバからジャvScriptをダウンロードし、そのJavaScriptから別のサーバにアクセスして情報を取得できないということになります。これによって、Webブラウザのセキュリティを高めているわけです。
現在のブラウザは全て、このCORSに基づいて設計されています。CORSで定義された方法に従えば、たとえ同一の生成元ではなくてもJavaScriptによる自由なアクセスが許可されます。
この考え方はマイクロサービスやAPIを活用したWebアプリを開発する上では非常に重要な考えなので、ぜひとも押さえておきましょう。
CORSの仕組み
本章では、JavaScriptを用いてアプリを開発するにあたって開発者が知るべきCORSのポイントを解説します。
「単純な要求」と「そうではない要求」に区別
JavaScriptでfetch APIを使ってサーバにHTTPリクエストを送信する状況を考えます。
このとき、HTTPメソッドとしてはGET、POSTやHEADを使い、かつ基本的なHTTPヘッダーがセットされただけのリクエストであれば、このHTTPリクエストを「単純なHTTPリクエスト」と仮定します。
それ以外のリクエストは全て「単純ではない要求」とします。
「単純な要求」の場合、そのまま要求を送信する
「単純な要求」の場合は、クロスオリジンのHTTP要求であっても、直ちにサーバへ送信されます。このときのOriginHTTPヘッダーには、要求の送信元の情報が掲載されます。
要求を受け取ったWebサーバは、その要求を許可するかどうかをOriginヘッダーをチェックするなりして判断できます。
サーバがHTTP要求を許可する際には、Access-Control-Allow-OriginHTTPヘッダーを接押して応答を返します。
それ以外では実際にサーバへ問い合わせて、許可を確認する
「単純な要求」ではない場合、ブラウザ上のJavaScriptランタイムは、サーバに事前に自動的に問い合わせてアクセスが許可されるかどうかを確認できます。この事前の問い合わせをプリフライト(Preflight)と呼びます。
プリフライトのリクエストは、これから使うHTTPメソッドやHTTPヘッダーの種類を申告します。このとき、Originヘッダーの他、Access-Control-Request-MethodやAccess-Control-Request-Headersを使います。
サーバはこれらをチェックして、アクセスを許可する際にはAccess-Control-Allow-Originヘッダの他、Access-Control-Request-MethodやAccess-Control-Request-Headers`を返します。
さらにプリフライトの有効期限であるAccess-Control-Max-Ageを設定します。
このように、サーバからのアクセス許可が確認できてから、実際のHTTPリクエストが送信されます。
補足
CORSは様々なエラーで失敗することがありますが、セキュリティ上の理由からエラーについてはJavaScriptから知ることができません。そのため、コードからはエラーが発生したことしかわかりません。
エラーの原因を詳細に突き止めるには、ブラウザのコンソールで詳細を確認することです。
まとめ
今回の記事では、CORSについて詳細に徹底解説しました。今回の記事を参考に、CORSについて理解を深めていただければ幸いです。
今回の記事はこれで終了です。
