← 一覧へ
ブラウザ・通信出る場所:ブラウザの画面・開発者ツールよく出る

ほかのサイトへの通信が止められた(CORS)

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

ひとことで言うと

「別のサイト(API)にデータを取りに行ったけれど、そのサイトが『あなたのページからは受け付けません』と断りました」という意味です。

よくある原因

  1. APIの側で、あなたのサイトのアドレスを許可していない
  2. ブラウザから直接呼んではいけないAPIを、ブラウザから呼んでいる
  3. APIのアドレスが間違っていて、エラーのページが返っている

自分で確かめること

たいていは、こうすると直ります

自分のAPIなら、許可するアドレス(Access-Control-Allow-Origin)を設定します。ほかの会社のAPIなら、サーバー側(API Route など)から呼ぶ形に変えます。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

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

【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)

【参考】
このエラーは「ほかのサイトへの通信が止められた(CORS)」というもので、よくある原因は次のとおりです。
・APIの側で、あなたのサイトのアドレスを許可していない
・ブラウザから直接呼んではいけないAPIを、ブラウザから呼んでいる
・APIのアドレスが間違っていて、エラーのページが返っている

どれに当てはまるかを確かめる方法も教えてください。