技術記事

micomia株式会社の井上です。今回はCORSについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. CORSとは？

CORS（Cross-Origin Resource Sharing）とは、簡単に説明すると「異なるドメイン間でのデータのやり取りを制御する仕組み」のことです。

直訳すると「オリジン（＝場所）をまたいでリソースを共有する」仕組みです。

ここで言うオリジンとは、プロトコル + ドメイン + ポート番号の組み合わせのことで、これらのいずれかが違うと「別のオリジン」と見なされます。

たとえば、
https://myapp.web.appと https://api.web.app はドメインが異なるため別オリジンです。
http://example.com と https://example.com のようにプロトコル（httpとhttps）が違う場合も、別オリジンとして扱われます。

通常、ブラウザはセキュリティ上の理由から「同じオリジン以外の通信を制限する」というルールを持っているので、あるWebアプリが別のオリジンのサーバーにデータを取りに行こうとするとブラウザによってブロックされてしまいます。

この制限を安全な形で緩め、サーバーが「特定のオリジンからのアクセスを許可する」ための仕組みがCORSです。

2. なぜCORSエラーが起こるのか

普段私たちが使っているブラウザには、Same-Origin Policy（同一オリジンポリシー）というセキュリティルールがあります。

例えば、FlutterFlowで作成したアプリがhttps://myapp.web.appというオリジンで動作しており、外部のAPI https://api.example.com にアクセスしようとした場合を考えます。

両者のオリジンは異なるため、ブラウザが安全のために通信を遮断します。これがCORSエラーです。

しかし実際の開発では、悪意のある通信だけでなく、正しい通信までもがこの制限によって遮断されてしまう場合があります。

つまり、両者のオリジンが異なるとエラーが発生してしまう＝正しい通信も遮断されてしまうということです。

こんな時に登場するのが、CORS設定です。

3. CORS設定

正しい通信も遮断されてしまわないように、サーバー側でそのサイトからの通信が安全であることを明示する必要があります。

そのために、レスポンスヘッダーの Access-Control-Allow-Origin にアクセスを許可したいオリジン（＝呼び出してくる側のフロントエンドのURL）を指定します。

これにより、ブラウザはそのオリジンからの通信を安全なものとして認識し、データのやり取りを許可します。

4. まとめ

CORS, CORSエラー、CORS設定のそれぞれの内容と役割をまとめると以下のようになります。

今後FlutterFlowや他のWeb開発でAPI連携を行う際は、「CORSとは何か」「なぜエラーになるのか」「どう設定すれば良いか」を意識しておくと、よりスムーズに開発ができるようになります。