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

公開日: 2025年9月23日

初めてJavaScriptで外部のAPIを叩こうとした日のことを、僕は今でも鮮明に覚えています。

「よし、これでデータが取れるはず！」と意気込んで fetch() を実行した瞬間、ブラウザのコンソール画面が真っ赤に染まりました。

Access to fetch at '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...

「ブロックされました？ なんで？ 俺のコード間違ってる？」

そこから3時間、必死にJavaScriptのコードを書き直しました。ヘッダーを変えたり、URLを変えたり...。でも、エラーは消えません。当時の僕は泣きそうでした。

でも、今なら分かります。僕のコードは1文字も間違っていなかったんです。

この「CORSエラー」は、バグではありません。あなたを悪意ある攻撃から守るために、ブラウザという「警備員」が体を張って仕事をしていた証拠だったのです。

今日は、あの時の僕のようにパニックになっているあなたへ、CORSの正体を「マンションの超優秀な警備員さん」に例えて解説します。

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

状況を整理しましょう。

• あなたのWebサイト (例: localhost:3000): マンションA
• データを欲しいAPIサーバー (例: api.example.com): マンションB
• あなたのブラウザ: マンションAの警備員さん

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

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

警備員さん（ブラウザ）は、真面目なので考えます。 「もしこの出前に毒が入っていたらどうする？ 勝手に他所のマンションのものを持ってきたら泥棒になるのでは？」

だから彼は、マンションBの管理人さん（APIサーバー）にこう確認します。

「うちのマンションAの住人がそちらのデータを欲しがってますが、許可してますか？」

この時、マンションBの管理人さんが、「はい、マンションAさんなら顔パスでOKですよ」という「許可証（Access-Control-Allow-Origin）」を持たせてくれれば、警備員さんはデータを通してくれます。

しかし、もし許可証がなければ...。 警備員さんは「許可なき通信は危険だ！ブロック！」と、データを破棄してしまうのです。これがCORSエラーの正体です。

つまり、悪いのはあなたのコード（住人）でも、ブラウザ（警備員）でもなく、許可証を出してくれなかったAPIサーバー（マンションBの管理人）の設定なのです。

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

原因が分かれば対策は簡単です。JavaScriptをいじるのではなく、あなたが作っているFlaskサーバー（マンションB）の設定を変えればいいのです。

僕も愛用している Flask-CORS というライブラリを使えば、たった2行で解決します。

# 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) と書くだけで、あなたのサーバーは「どのマンションから来てもOKだよ！」という許可証を自動で発行してくれるようになります。

まとめ

CORSエラーは、初心者が必ず通る「洗礼」のようなものです。

でも、これを知っていればもう怖くありません。次に赤い文字を見たら、焦ってコードを消すのではなく、 「ああ、警備員さんがちゃんと仕事をしてくれてるんだな。サーバー側に許可証をもらいに行こう」 と思ってください。

それだけで、あなたはもう「コードを書くだけの人」から「Webの仕組みを知っているエンジニア」へ一歩前進しています。