CORS ってなに？

Posted at 2025-03-17

CORSは「クロス・オリジン・リソース・シェアリング」といって、ウェブサイト同士がお互いに情報をやりとりするときのルールみたいなもの

例で考えてみよう

学校の教室を「ウェブサイト」だと考えてみる

たとえば、あなたが作った絵（データ）があるとします：

普通は、友達のページからあなたの絵を勝手に使うことはできません。でも、CORSで「友達のページは使ってもいいよ」と許可すれば大丈夫になる。

これは安全のためのルール。
もし誰でも他のウェブサイトから情報を取れたら、悪い人があなたの大切な情報を勝手に見たり使ったりできちゃう。

CORSは、「誰に」「何を」「どうやって」共有するかを決めるルール。
この決まりがあることでウェブサイト同士が安全に協力できるようになる！感じ

はい、こんな感じですがCORSを具体的に説明します。

ブラウザでの基本動作
たとえば、あなたが「example.com」というサイトを見ています。このサイトのJavaScriptが「api.another-site.com」からデータを取得しようとします。
ブラウザの判断
ブラウザは「違うサイトからデータを取ろうとしている！確認が必要だ」と判断します。
リクエストの種類による違い
- シンプルなリクエスト（普通のGETなど）：まずそのままリクエストを送ります
- 複雑なリクエスト（PUT/DELETEや特別なヘッダーがある場合）：事前に「確認リクエスト」（OPTIONS）を送ります
サーバーからの応答
サーバー側（api.another-site.com）は特別なヘッダーを返します：
```
Access-Control-Allow-Origin: https://example.com
```
これは「example.comからのアクセスはOKですよ」という意味です。
結果
- 許可されていれば：データのやり取りができます
- 許可されていなければ：ブラウザがエラーを出して、データは取得できません

APIサーバーは以下のように設定：

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization

この場合、Cookieなど認証情報を含むため、特別な設定が必要：

Access-Control-Allow-Origin: https://login.example.com
Access-Control-Allow-Credentials: true

CORSはウェブサイト間の「許可証」のような役割を果たし、適切に設定することでセキュリティを保ちながら必要な情報共有を実現する。