こんにちは！今日は、Web開発でよく聞くけど意外と理解しづらいCORS（Cross-Origin Resource Sharing）について、一緒に学んでいこうと思います。
Webの世界は複雑で、ちょっとしたことが大きな違いを生むんですよね。CORSもその一つ。
さあ、一緒にCORSを理解してきましょう〜
CORSって何？
まず、CORSって何？って話から始めます。
CORSは、Webページが異なるオリジン（つまり、異なるドメイン、プロトコル、またはポート）のリソースにアクセスする際のセキュリティメカニズムです。
つまり、あなたのサイトが他のサイトのデータを安全に扱うためのルールのこと。これがないと、セキュリティリスクが高まります。
| ホスト (Host) | インターネット上で情報やリソースを提供するコンピューターやサーバー。各ホストには独自のIPアドレスがあり、インターネット上で特定の位置を持つ。
例：ウェブサイトをホストするサーバー |
| ドメイン (Domain) | インターネット上のアドレスの一部。ウェブサイトや電子メールアドレスを識別するために使われる。人間が理解しやすい形式でサーバーを識別するために用いられる。
例：「example.com」 |
| オリジン (Origin) | ウェブページの起源を示す概念。スキーム（プロトコル）、ホスト（ドメイン名）、ポートの組み合わせで定義される。
例：「https://example.com:80」 |
なぜCORSが必要なの？
Webはオープンでつながっているけど、同時にセキュリティも重要です。
例えば、あなたがログインしているサイトAから、悪意のあるサイトBがデータを盗もうとするといったリスクがあります。
CORSは、このような不正なアクセスを防ぐために存在しているんです。
安全なWebのためには、必要不可欠なんですよ。
CORSの仕組み
CORSの基本は「信頼できるオリジンからのリクエストのみ許可する」ということ。
これは、サーバー側で設定され、ブラウザがこの設定に従います。
サーバーは、リクエストが来たときに「このオリジンからのリクエストはOKかな？」とチェック。
OKならリソースを提供し、ダメなら拒否。これで、安全にデータのやりとりができるようになります。
簡単なCORSの例
例えば、あなたのサイト（example.com）が、他のサイト（api.example.com）からデータを取得したい場合があるとします。
もし、api.example.comがCORSでexample.comを許可していれば、問題なくデータのやりとりができます。
でも、許可されていなければ、「CORSエラー」が発生してアクセスできないんです。
CORSをどう扱う？
開発者としては、CORSは頭痛の種になることも。
しかし、適切に設定することでセキュリティを確保しつつ、必要なデータ交換も可能になります。サーバーの設定を見直したり、必要に応じてオリジンを許可リストに追加することが大切です。
設定方法
素のPHP
※WEBサーバーにて設定することも可能ですが、今回はPHPでの実装を想定。
header("Access-Control-Allow-Origin: http://example.com");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, X-Requested-With");
/**
* - http://example.com からのアクセスを許可
* - 許可メソッドは GET, POST, PUT, DELETE
* - リクエスト中に許可されるHTTPヘッダー
* - Content-Type（リソースのメディアタイプ
* - X-Requested-With（通常、Ajaxリクエストを識別するために使用される）
*/Laravel
※Laravel 7.x以降ではデフォルトでCORS設定が組み込まれているっぽい。
return [
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://example.com'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
/**
* - http://example.com からのアクセスを許可
* 'allowed_origins' => ['http://example.com']
* この設定は、http://example.com からのリクエストを許可します。
*
* - 許可されるHTTPメソッド
* 'allowed_methods' => ['*']
* この設定は、すべてのHTTPメソッドを許可します。特定のメソッドのみを許可する場合は、
* ['GET', 'POST', 'PUT', 'DELETE'] のように配列を編集します。
*
* - 許可されるHTTPヘッダー
* 'allowed_headers' => ['*']
* この設定は、すべてのHTTPヘッダーを許可します。特定のヘッダーのみを許可する場合は、
* 必要なヘッダーを配列に追加します。
*/
];
まとめ
CORSは、Webの安全性を保つための重要なメカニズム。最初は複雑に感じるかもしれませんが、基本を理解すれば、より安全で効果的なWebアプリケーション開発が可能になります。
これにてCORSの基本を何となく理解！