こんにちは。今回は「CORS（コース）」という、ちょっと専門的だけど大事な仕組みについて、できるだけわかりやすく紹介します。Web制作に少しでも興味がある人なら、きっと役に立つ知識です。
自分のサイトと、他人のサイト
たとえば、あなたが「https://my-blog.com」という自分のブログサイトを作ったとします。そこから、天気情報を提供している「https://weather-api.com」にアクセスして、天気を表示したいと思ったとします。
でもここで問題が起きることがあります。
ブラウザは、勝手に他人のサイトにアクセスすることを制限しているのです。
これはセキュリティを守るためです。もし何でも自由にアクセスできてしまうと、悪意のあるサイトが勝手に個人情報を盗んだり、不正な操作を行ったりする恐れがあるからです。
CORSとは
この制限を安全に「解除」するための仕組みが CORS（Cross-Origin Resource Sharing） です。
CORSとは、「このサーバーは、他のサイトからのアクセスを許可していますよ」とサーバー側が伝えるための方法です。
この許可があると、ブラウザは「それなら大丈夫」と判断し、外部サイトへのアクセスを認めてくれるのです。
ケーキ屋さんの例で考える
わかりやすくするために、ケーキ屋さんの例で説明します。
- あなたの家のキッチン（＝自分のサイト）ではケーキを作っています。
- ある日、よそのケーキ屋さん（＝外部のサイト）に行って、特別な材料をもらいたくなりました。
でも、ふつうは勝手に他の店に入って材料を持ち出してはいけませんよね。
そのとき、そのケーキ屋さんが「うちは誰でも自由に材料を持っていっていいよ」と言ってくれたら、安心して材料をもらいに行けます。
この「自由に持っていっていいよ」という宣言こそが、Webの世界でいう「CORSの許可」です。
クッキーやログイン情報があるときは注意が必要
たとえば、外部のサイトにログインが必要だったり、クッキー情報（ログイン状態を記録する情報）を一緒に送る必要がある場合は、より慎重に設定する必要があります。
そのときは use-credentials という設定を使って、「このリクエストにはログイン情報も含めてください」と明示します。
まとめ
- CORSとは「他のサイトにアクセスしてもよいかどうかを確認する仕組み」
- ブラウザはセキュリティのために、外部サイトへのアクセスを制限している
- サーバーが「OKだよ」と設定することで、その制限を安全に解除できる
- WebアプリやAPIを使うときにとても重要な仕組み
CORSは、Webの裏側で使われている重要なセキュリティの仕組みです。初めて聞いた人も、なんとなく「他のサイトとやり取りするときのルールなんだな」と理解してもらえたら嬉しいです。
コメント