JavaScriptでのクロスオリジンリクエストエラー

Question

実現したいこと

JavaScriptのfetchを使ってバックエンドAPIにリクエストを送信すると、ブラウザにCORSのエラーが表示されます。どのように解決すればよいでしょうか。

発生している問題・分からないこと

javascript

fetch("http://localhost:8080/api/users") .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

ブラウザのコンソールに、以下のエラーが表示されます。
text

Access to fetch at 'http://localhost:8080/api/users'from origin 'http://localhost:3000' has been blocked by CORS policy

フロントエンドはhttp://localhost:3000、バックエンドはhttp://localhost:8080で実行しています。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

CORSの設定はフロントエンドとバックエンドのどちらで行えばよいでしょうか。
また、具体的にはどのように設定すればよいでしょうか。

Comments

[Lhankor_Mhy]

バックエンド側で対処が必要です。ミドルウェアなどを使うといいかと思いますが、タグを見る限りバックエンド側は Java でしょうか？

Answer 1

バックエンド側でhttpヘッダを出力してください

Access-Control-Allow-Origin:http://localhost:8080"