【CORS入門】「CORSポリシーにブロックされました」エラーの正体と、一番簡単な解決策

公開日: 2025年9月23日

前回の記事で fetch APIの使い方 をマスターしたあなた。意気揚々と、自分で作ったローカルサーバーや、公開されているAPIにリクエストを送ってみたとします。しかし、ブラウザのコンソールに表示されたのは、無慈悲な真っ赤なエラーメッセージでした。

Access to fetch at http://api.example.com from origin http://localhost:5000 has been blocked by CORS policy...

「CORSポリシーによってブロックされました」… 多くの学習者が、このエラーを見て「自分のfetchの書き方が間違っているんだ！」と悩み、何時間もコードを修正し続けてしまいます。僕もそうでした。

しかし、断言します。このエラーは、ほとんどの場合、あなたのJavaScriptのコードは一行も間違っていません。 これはエラーではなく、あなたを悪意ある攻撃から守るための、ブラウザの正常なセキュリティ機能が作動した証拠なのです。

今日は、このCORSの正体を、「マンションの超優秀な警備員さん」の例えで、分かりやすく解説します。

あなたのブラウザは、超優秀な警備員

状況を整理しましょう。

• あなたのWebサイト (例: http://localhost:5000): マンションA
• あなたがデータを欲しいAPIサーバー (例: http://api.example.com): マンションB
• あなたのブラウザ: マンションAの、超優秀で真面目な警備員さん

あなたが `fetch` を実行するということは、マンションAの住人であるあなたが、警備員さん（ブラウザ）に「ちょっと、お隣のマンションBから出前（データ）を取ってきてくれない？」とお願いするようなものです。

警備員は、なぜ出前を止めるのか？

警備員さん（ブラウザ）は、まずマンションBに向かいます。しかし、彼はあなたの安全を第一に考えているので、いきなりデータを受け取りません。 代わりに、マンションBの管理人さん（APIサーバー）にこう尋ねます。

「うちのマンションAの住人が、そちらから出前を取りたいと言っているのですが、そもそも、たくあんちは、マンションAからの出前注文を許可していますか？」

この時、マンションBの管理人さん（APIサーバー）が、「はい、うちはマンションAさんからの注文は、特別に許可していますよ」というお墨付き（Access-Control-Allow-Originという特別な許可証）を返してくれなければ、警備員さんは「これは怪しい！許可されていない通信だ！」と判断し、安全のために、その通信をブロックします。

これが、「CORSポリシーによってブロックされました」の正体です。 悪いのは、あなたのコードでも、警備員さん（ブラウザ）でもなく、出前を許可してくれていない、マンションBの管理人さん（APIサーバー）なのです。

解決策：サーバーに「許可証」を発行してもらう

解決策はシンプルです。私たちがコントロールできるAPIサーバー（例えば、あなた自身が作っているFlaskアプリ）に、「うちのサイトからのアクセスは安全だから、許可してください」という設定を追加すれば良いのです。

Flaskでは、Flask-CORS というライブラリを使うと、この設定が驚くほど簡単にできます。

# 1. ライブラリをインストール
pip install flask-cors

# 2. app.pyを修正
from flask import Flask
from flask_cors import CORS # CORSをインポート

app = Flask(__name__)
CORS(app) # ← たったこれだけ！

@app.route("/api/data")
def data():
    return {"message": "これでCORSエラーは起きません！"}

CORS(app) の一行を追加するだけで、あなたのFlaskサーバーは、どのサイトからのアクセス（fetchリクエスト）に対しても、「はい、どうぞ！安全ですよ！」という許可証を自動で発行してくれるようになります。

まとめ

CORSエラーは、バグではありません。悪意あるサイトが、あなたがログイン中の銀行サイトなどから勝手にデータを盗み見するのを防ぐための、インターネットの安全を守る、非常に重要な仕組みです。

次にこのエラーに遭遇したら、もう慌てる必要はありません。 「ああ、警備員さんがちゃんと仕事をしてくれているんだな。よし、サーバー側に許可証をもらいに行こう」 そう考えられるようになれば、あなたはもう、立派なWeb開発者の一員です。