【初心者向け】CORSエラーとは？原因と解決方法をやさしく解説

この記事で解決すること

ブラウザの開発者ツールにこんなエラーが出た。

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

「CORS」って何？なぜブロックされるの？

CORSは「Cross-Origin Resource Sharing（クロスオリジンリソースシェアリング）」の略です。

簡単に言うと、ブラウザのセキュリティ機能です。「別のサイトのデータを勝手に取りに行くのを防ぐ」仕組みです。

もしCORSがなかったら、悪意のあるサイトがあなたのブラウザを使って、銀行のサイトやメールのデータを勝手に取得できてしまいます。それを防ぐために、ブラウザが「このリクエストは許可されていません」とブロックしています。

開発中は http://localhost:3000 でサイトを動かして、https://api.example.com にデータを取りに行くことが多いです。

この2つは「別のオリジン（出所）」なので、ブラウザがブロックします。

オリジンとは「プロトコル + ドメイン + ポート番号」の組み合わせです。

http://localhost:3000  ← オリジンA
https://api.example.com ← オリジンB（別のオリジン）

APIサーバー側で、特定のオリジンからのアクセスを許可する設定を追加します。

Node.js（Express）の場合：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000'
}));

Pythonの場合：

from flask_cors import CORS
CORS(app, origins=['http://localhost:3000'])

自分のサーバーを経由してAPIにアクセスする方法です。ブラウザから見ると同じオリジンなので、CORSエラーが出ません。

Chrome拡張「Allow CORS」を使うと、開発中だけCORSを無効にできます。ただし本番環境では使えないので、あくまで一時的な対処です。

// NG：すべてのオリジンを許可
app.use(cors({ origin: '*' }));

本番環境で *（すべて許可）にすると、セキュリティリスクになります。許可するオリジンは具体的に指定してください。