CORS とは

keyem

CORS とは Cross-Orgin Resource Sharing の略で異なるオリジン間でのリソースの共有を許可するということ。

詳しいCORSの説明の前にまずはオリジンの定義について確認します。
オリジンとはドメイン、プロトコル、ポート番号のことで、以下の例の場合だとドメインはexample.com、プロトコルはHTTP、ポート番号は8000となる。
例）http://example.com:8000 

オリジンを定義したところで、なぜCORSという仕組みが必要かというところから説明します。
これはXSSやCSRFなどのセキュリティ上の理由から、ブラウザはスクリプトによって開始される異なるオリジン間でのHTTPリクエストを制限しています。
つまり、JavascriptからのXMLHttpRequestやFetch APIによるAPIサーバーへのアクセスが制限されているということです。

ではCORSの設定がどのように行われているかというと、単純リクエスト、プリフライトリクエストとリクエストの種類により設定が異なります。

単純リクエストとは簡単に言うと以下のメソッドを使用したリクエストです。
- GET
- POST
- HEAD
これらのリクエストの場合にはブラウザ側では設定は必要なく、サーバー側でAccess-Control-Allow-Originヘッダーに許可するオリジンを記載することで設定出来ます。

プリフライトリクエストとは以下のメソッドを使用したリクエストです。
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
- PATCH
これらのリクエストの場合には、リクエストのはじめにOPTIONSメソッドを使用したリクエストを送信し実際のリクエストを送信しても安全かを確かめています。サーバー側ではこのレスポンスには確認の結果、許可されるオリジン、メソッド、ヘッダーの情報をAccess-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headersに記載します。

以上、簡単ですがCORSについてまとめました。他にもCookieなど認証情報を含む場合には別途設定があります。
参考
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS


いいなと思ったら応援しよう！