[備忘メモ]CORS

こんばんは、クロです。
急に思い立ったので日々自分が学んだことを書き連ねていこうと思った次第です。

背景

SEからWebエンジニアに転職したら全くわからないことだらけで、毎日知らない言葉が出てくる…
都度調べてるけどおそらくまた調べることになるんだろうな…というわけでざっくりと調べた結果をまとめて、参考リンクを貼っていこうかと。

後から見た時に「当時自分が何で困っていたのか」を振り替えれるようにすることが目的です。
詳しく調べて書く時間はないので、大体30分以内に書ききれるレベルの内容にしていきたいです。

CORSってなーに?

出てきた場面

Django REST Frameworkの学習をしていた時にしれっと出てきた。
django-cors-headersをインストールして設定と書いてあったんですけどそもそもCORSを知らなかったので。

ざっくりした理解

・そもそも”同一オリジンポリシー”なるものがあるらしい
二つのページのプロトコル、ポート番号 (もしあれば)、ホストが等しい場合、両者のページは同じオリジンとみなす
読み込まれた文書やスクリプトから、他のオリジンのリソースにアクセスできないように制限するもの

・CORS = Cross-Origin Resource Sharingの略
データのアクセスを許可できるWebサイトに対してはオリジンを越えたアクセスを可能にするための仕組み
ブラウザはCORSを検出すると、実際にメソッドを投げる前にOPTIONSメソッドによる検査を行う

色々調べてたら30分経った

とりあえず読んでた本ではフロントエンドがlocalhost:3000、バックエンドがlocalhost:8000だったからAPI叩くとエラーになるってことだと理解。
エラーにならないように設定する方法が書かれていた…んだと思う。英語なのでよくわからん。
Webサービスのシステム全体像が理解できていないからかな…ということで引き続き勉強していきたいと思います。

参考リンク

同一オリジンポリシー
CORSまとめ
CORS (Cross-Origin Resource Sharing) ってなに?
CORS関連、これだけ知っとけばまぁ大丈夫
Cross-Origin Resource Sharing(CORS)に必要なサーバヘッダを処理するDjangoアプリケーション