CORSを理解して非同期通信を豊かにする

未分類

こんにちは!
エンジニアのTakutoです、前回のブログからだいぶ日が空いてしまいました。。
本日はCORSというものについてご紹介していきたいと思います!

CORSってなに?

まずなんて読むか?ですが、

  • シーオーアールセス
  • コルス

と読みます。間違ってもコロスとは言ってはダメです。
CORSは略称ですので正確には「Cross-Origin Resource Sharing 」です。
名前からさするに“複数のサイト間のリソースをシェアする”みたいな匂いがしますね。

MDNを引用させていただきますと、

異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組み

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

というのがCORSの正体です。言葉ではわかりずらいので図にしてみましょう。
下の図の用にアクセスしているサイトから異なるサイトにhttpリクエストをする場合、「Same-Origin Policy」という制限が働くため、数のbbb.comにはアクセスできません

「Same-Origin Policy」は重要なので覚えておきましょう!
サイトのセキュリティを考えるとこのポリシーは非常に重要ですが、サイト間の情報の受け渡しができないとなると少し不便ですね。。。

そこで生まれたのがCORSです!CORSを利用することで、信頼関係のあるサイト間ではデータの受け渡しができるようになります。

めちゃめちゃ便利ですね!
次は実際にCORSを設定していく時に登場するヘッダーについて説明します。

CORS特有のHTTPヘッダー

CORSでは特有のヘッダーが利用されます。1つ1つご紹介しますね。

HTTPリクエスト

CORSで使われるHTTPリクエストには主に3つのヘッダーが準備されています。
リクエストに関してはブラウザが自動で行ってくれるので利用者はあまり意識することはありません。

HTTPレスポンス

上記のHTTPリクエスト行った後のレスポンスに使用されるヘッダーは以下のものがあります。
P13とP14に記載があるので見てみてください。

実例でご紹介

上で説明したヘッダーを文字で説明されてもいまいちわかりにくいので、図を使って説明していきたいと思います。まずはみなさん以下の状況を思い浮かべてください。

この時、bbb.comに送られるリクエストのHTTPヘッダーが右側に記載されています。
Originと書かれている部分に注目してください。これはこのリクエストがaaa.comからのリクエストであることを表しています。

そして次にレスポンス結果をみていきたいと思います。以下の図をご覧ください。
以下の図のようにレスポンスヘッダーに着目すると「Access-Control-Allow-Origin」といのがあることがわかるかと思います。このヘッダーはリクエストを許可するオリジンが書かれていますが、今回の例だと「*」とあります。つまり全てのオリジンからのアクセスを許可するという意味になります。

まとめ

いかがでしたでしょうか。少しヘッダーに関しては難しいことがあるかもしれませんが、使っていくうちに理解していきたいですね!私もまだまだですので、じっくり理解を深めていきたいと思います。上記のSlideshareには他の例も載せておりますので、興味がある方はぜひ見ていただければと思います!

この記事を書いた人

エンジニア歴3年、Takutoと申します。
Alibaba Cloud / AWS / GCP / VMware / Python / Javascript
いろいろやっていますが、好きなサービスはAWSのStep Functinsです。
Pythonも好きです。

Takutoをフォローする
未分類
Takutoをフォローする
技術ブログ東京

コメント

タイトルとURLをコピーしました