APIの開発をしたり、外部APIを叩こうとしたら、「cors policy no ‘access-control-allow-origin’」というエラーが出ることはないでしょうか。
今回は、このCORS についてざっくりとではありますが解説していきたいと思います。
CORSとは
CORSとはオリジン間リソース共有（Cross-Origin Resource Sharing）の略になります。字面だけ見ても分からないので、詳しく説明していきたいと思います。
オリジンとは、Webサイトがどこにあるかというホスト元の情報になります。
つまり、WEBサイトのURLにおいて、「http」や「https」などの通信プロトロコル、「example.com」ドメイン名とポートを指します(通常は表示したり指定したりする場面はありませんが)。
つまり、異なるオリジン(大体、異なるWEBサイトやWEBシステムと捉えて良いかと思います)間での情報の共有を指します。
冒頭のエラーはCORSのアクセスが許可されていないというエラーになります。
このCORS自体は、CSRF対策として、WEBブラウザに実装されている仕組みになります。
例えば、Aというサイトのブラウザ上で動作するJavaScriptのプログラムでBというサイトのAPIへアクセスするとします。BサイトのAPIが公開されているAPIならいいですが、BサイトのAPIが公開していないAPIの場合(例えばBサイトのCページからAjaxでアクセスするようなプログラムを想定して作成されていた場合が考えられます)、AサイトからBサイトのAPIへ不正にアクセスできることになってしまうことになります。
そのため、WEBブラウザは異なったオリジンからのアクセスを許可しているWEBシステム以外に対してのJavaScriptでのアクセスを制限する機能がCORSになり、この別のオリジンからのアクセス許可をするか否かの設定がCORS Policyになります。
このCORS Policyはなんでもかんでもダメという訳ではなく、公開しているAPIでは異なるWEBサイトからのアクセスを許可する場合もあるかと思います。そういう場合は、別オリジンからのアクセスを許可することが可能です。また、公開はしたいけれど、一部の人だけに向けてという制限を設けたいときは、APIキーなどをリクエストに付帯させるなどの条件をつけること制限をCORS Policyで設定することになります。
今回はここまでになります。
~参照サイト~
~画像出展元~
