オリジンとは
「http://aaa.com/myapp/myapp2:3000」
でHTTP通信を行ったとき、以下の要素に分解される。
- スキーム: http
- ドメイン: aaa.com
- パス: myapp/myapp2
- ポート: 3000
オリジンは「スキーム x ドメイン x ポート」の組み合わせであり、
↑の場合は**「http x aaa.com x 3000」がオリジン**となる。
同一オリジンポリシーとは
同一のオリジン同士でしか通信できないというブラウザのセキュリティ機能。
オリジンAで読み込まれたリソース（html,js,cookie etc.）からオリジンBのリソースへの通信をしようとするとブラウザに同一オリジンポリシー違反としてブロックされる。
このポリシーが存在しないと、例えばオリジンAが悪意あるサイトで、
「別サイトへアクセス & ページの表示内容をすべて抜き取ってオリジンAのDBへ保存する」といったJSがあり、これが実行されたときに別サイトの情報をオリジンAのサイトに抜き取られてしまう。
CORS(コルス)とは
しかしながら、「オリジンA」と「オリジンB」があって1サービスとして成り立つようなとき、
想定されているオリジン同士での通信であるのに同一オリジンポリシーに阻まれてしまうという望ましくない事態になってしまう。
これを解決する・・・いわば一部に正当な穴をあけるのが「CORS」という仕組みである。
CORSの設定方法
**「アクセス先のオリジン側」に「許可するアクセス元のオリジンの情報を設定する」**形となる。
例えば、
「フロントエンドがNuxt.js」「バックエンドがRails」なシステムがある場合、Rails側にCORS設定として、Nuxt.jsのオリジンの情報を加える(gem rack-corsで容易に可能)。