JavaScript Access to fetch ... has been blocked by CORS policy の原因と直し方（CORS error fix）

「blocked by CORS policy」は、別オリジン（ドメイン・ポート）のAPIをブラウザから呼んだとき、サーバーが許可ヘッダーを返していないために出るエラーです。JavaScript側ではなくサーバー側で直します。

このエラーメッセージ

原因

• 呼び出し先サーバーがAccess-Control-Allow-Originヘッダーを返していない
• カスタムヘッダーやJSON送信でプリフライト（OPTIONS）が失敗している
• http と https、ポート違いなどオリジンが一致していない
• ワイルドカード*とcredentials: includeを同時に使っている

❌ エラーになるコード

// ブラウザ上のJS（別オリジンのAPIを直接fetch）
fetch('https://api.example.com/data')
  .then(r => r.json())
  .then(console.log);

✅ 修正したコード

// サーバー側（Node/Express例）でヘッダーを返す
app.use((req, res, next) => {
  res.set('Access-Control-Allow-Origin', 'https://example.com');
  res.set('Access-Control-Allow-Headers', 'Content-Type');
  if (req.method === 'OPTIONS') return res.sendStatus(204);
  next();
});

// PHPなら
// header('Access-Control-Allow-Origin: https://example.com');

解決のポイント

CORSはブラウザの保護機能なので、フロントのコードでは回避できません。呼び出し先を自分で管理できるなら、レスポンスにAccess-Control-Allow-Originを付けます。他社APIで変更できない場合は、自分のサーバーを経由する（プロキシ）のが正攻法です。mode: "no-cors"では中身を読めないため解決になりません。

よくある質問