StackShelf
HTTPエラー エラー解決

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header の原因と解決法

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header の原因と具体的な解決手順をまとめました。

2分で読める
httpHTTPエラーAccess to fetch at 'httpsCORSAccess to fetch at 'https://api.example.

エラーメッセージ（全文）

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

このエラーとは

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header は HTTP 開発でよく遭遇するエラーです。

想定環境: Windows / macOS / Linux

よく出る状況: ブラウザ fetch / axios 時

よくある原因

  • サーバー側 CORS 未設定
  • preflight OPTIONS 未対応
  • credentials 設定不一致

解決方法

方法1: サーバーで CORS ヘッダ

Access-Control-Allow-Origin を設定.

それでも直らないとき

バージョン情報（HTTP のバージョン、OS、実行コマンド）を添えて、エラーメッセージ全文と直前に変更した点を確認してください。ログの数行上にも原因の手がかりが残っていることが多いです。

まとめ

「Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header」は サーバー側 CORS 未設定 が原因のことが多いです。上記の手順で切り分けてください。

次にやること

同じ HTTP カテゴリの関連エラーもあわせて確認してください。

よくある質問

Access to fetch at 'https://api.example.com' from origin 'http://localhost:30… とは何ですか？

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header は HTTP 実行時に表示されるエラーです。サーバー側 CORS 未設定

Access to fetch at 'https://api.example.com' from origin 'http://localhost:30… の原因は？

サーバー側 CORS 未設定。preflight OPTIONS 未対応。credentials 設定不一致。

Access to fetch at 'https://api.example.com' from origin 'http://localhost:30… の直し方は？

サーバーで CORS ヘッダ：Access-Control-Allow-Origin を設定.

HTTP で Access to fetch at 'https が出るのはなぜ？

ブラウザ fetch / axios 時

Access to fetch at 'https://api.example.com' from origin 'http://localhost:30… を防ぐには？

。

次に読むべき記事

同カテゴリ「HTTPエラー」の記事

人気記事

学習ルート

体系的に学びたい方はこちらから。

エラー・トラブル集で続きを探す →

あわせて読みたい

関連記事