Web API を開発する際避けて通れないCORSについてサクッと要点をつかめるように記載していきます。細かい設定方法などは記載しないので、CORS理解の足掛かりにしていただければなと思います。
CORSとは?の前に同一生成元ポリシーについて
同一生成元ポリシー(Same-Origin Policy)ってご存知でしょうか。まずはこちらの絵をご覧ください。
悪質サイトにアクセスしてしまいそのレスポンスに含まれたJSから、善良なサイトにアクセスされている様子です。悪質サイトっていうのは例えば、有名なサイトの偽サイトや悪質ブログなどですね。悪質なJSが埋め込まれていると、勝手に善良なサイトにアクセスされて良からぬことをされてしまう可能性があります。プライベートな情報を保持しているサイトに接続されると、情報を抜き出されたり勝手に操作されるかもしれません。
これを防ぐためにブラウザは同一生成元ポリシーというものを導入しています。簡単に言うと、とあるオリジンからレスポンスされたスクリプト経由で別のオリジンへアクセスできないような仕組みにしています。
オリジンというのは「プロトコル+ドメイン+ポート番号」のことです。例えばhttp://example.com:80
は一つのオリジンを表していて、プロトコル、ドメイン、ポート番号のどれか一つでも違えば別オリジンということになります。
CORSとは?
別オリジンにアクセスできないと書きましたがそれはそれで困っちゃいますよね。それができなかったらWeb API はほぼ機能しないわけですし。セキュリティを考慮にいれつつ、なんとかして別オリジンへアクセス可能にする方法を考えていたわけですが、そこで編み出された手法の一つがCORSなんですよ。Cross-Origin Resource Sharingと書き、オリジンを跨いでリソースをシェアできるようにしましょうといったことを表しています。
CORSの仕組み
ブラウザが別オリジンにアクセスさせないのは、悪質サイト経由でアクセスさせたくなかったからです。だったらアクセスされるオリジン側で、特定のオリジンだけアクセスできるようにしておけばいいじゃないかという風に考えます。絵を書いていきます。
ブラウザはオリジンAから受け取ったJSでオリジンXにアクセスしようとしています。その際、オリジンXにどのオリジンからのアクセスを許可しているかのリストを送ってもらい、そこにオリジンAが含まれているかを見てアクセス可否を判別します。この確認作業を本来のリクエスト(GET、POSTなど)の前にOPTIONSというHTTPメソッドを使って行います。これをプリフライトリクエストと言います。プリフライトリクエストでのOK例、NG例の絵です。
こんな感じでブラウザはCORSという手法を導入して別オリジンへのアクセス可否を判断しているわけです。プリフライトリクエストは必ず行われるわけではなく、シンプルなリクエストの場合は行われませんが詳細は割愛します。
CORSの設定方法
設定としてはサーバ側でアクセス可能なオリジンを定義しておき、それをHTTPヘッダに含めてレスポンスしてあげるだけです。具体的に言うと、Access-Control-Allow-Origin
というヘッダに、アクセスを許可するオリジンを記載してレスポンスします。セキュリティ上どこからアクセスされても構わない場合はAccess-Control-Allow-Origin: *
とすれば、どのオリジンからもアクセス可能となります。Access-Control-Allow〜
というヘッダは他にもあってもう少し細かく制御できるので詳しくは調べてみてください。
以上CORSについてざっくり記載しましたが、要点を掴んでいただけてたら幸いです。