CORSについて調べたのでまとめたお

ハイサイまいど〜! 天才美少女ぷよぐやまーのnasaぼんです。

最近めちゃ暑いですが、令和ちゃん(幼女)がやんちゃして気温をあげちゃった(てへぺろ)と思うとなんだか暑さが和らぐ今日このごろです。

CORSについて調べたので、つらつらと駄文を連ねていこうと思います。

とりまMDNみた

何の略か分かりませんが( Mozilla Developers Networkかしら?) 取り敢えずココを見ておけば安牌です。

CORSとは Cross-Origin Resource Sharingの略で、日本語ではオリジン間リソース共有になります。 これはたとえばnasa.me上で動いているwebアプリが異なるドメイン(例えばnasa.gov)にあるリソースにアクセスできるようにする仕組みです。

なぜ、普通にアクセスできないのん?という疑問がありますね。

ブラウザはスクリプトを実行するときにSame-Origin policyというものと従います。 Same-Origin policyはウェブセキュリティの重要な仕組みで、あるオリジンから読み込まれたスクリプトについて、そのスクリプトから他のオリジンのリソースにアクセスできないようにするものです。

これによってブラウザは nasa.meからnasa.govへのアクセスを禁止します。

やだ〜!。アクセスしたい!と言うこともあるのでCORSという仕組み(取り決め?)があります。 机バンバン

先生!どうすれば!という話ですが、CORSヘッダーを付けるだけです!

クロスオリジンHTTPリクエストではリクエストヘッダーに

GET /resource HTTP/1.1
...
Origin: http://nasa.me

のようにOriginフィールドが付与されます。 (fetchAPIとか使うときにオプションが必要かもしれません)

んで。サーバーはこのOriginフィールドを見て、信頼できるドメインからのリクエストであればレスポンスを返すわけです。

レスポンスには

Http/1.1 200 OK
...
Access-Controll-Allow-Origin: http://nasa.me

の用な感じでAccess-Controll-hogeのようなフィールドが付きます。

他にも知っておくべきことはあると思いますが(プリフライトリクエスト、Cookieやり取りなど)疲れたので書けません。

ぜひこちらを!

オリジン間リソース共有 (CORS) - HTTP | MDN

いつも最後は疲れて雑に締めてますが今回も同じく、雑に終わりまする、、、

雑談

  • クソどうでもいいことですがえれっとさんのPIXIV FANBOXのヘッダー画像が素晴らしく良いので見てみてください。最高の笑顔がそこにはあります!
  • 最近、映画コンフィデンスマンJPを見ました。流れとしてはドラマと同じなので、あんまり面白くないかな〜もうこの流れには飽きるかな〜と思っていたのですが、めちゃめちゃ面白かったです。 毎回同じようなパターンなのになぜ飽きない(飽きさせない)のが不思議でたまりません。 暇だな〜って人は一回見てみて!ドラマ見てなくてもいいよ!
  • 最近、虫が出てくる夢をよく見ます。 この前は蜘蛛が顔にひっついて飛び起きました。(怖かった) 起きたあとも天井の影がユラユラしていて蜘蛛に見えて怖かった。 なぜこんな夢を見るのか。呪いか、、、

どうか良い夢見ますように。おやすみ!