ほかのサイトへの通信が止められた(CORS)
Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy
ひとことで言うと
「別のサイト(API)にデータを取りに行ったけれど、そのサイトが『あなたのページからは受け付けません』と断りました」という意味です。
よくある原因
- APIの側で、あなたのサイトのアドレスを許可していない
- ブラウザから直接呼んではいけないAPIを、ブラウザから呼んでいる
- APIのアドレスが間違っていて、エラーのページが返っている
自分で確かめること
- 呼んでいるAPIが、自分で作ったものか、ほかの会社のものか確かめる
- 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のアドレスが間違っていて、エラーのページが返っている どれに当てはまるかを確かめる方法も教えてください。