【axios】CORSエラーについて

前提

React+Next.js+TyoeScriptを使用(フロントエンドのみ)

実現したいこと

axiosを用いて、APIからレスポンスを受け取りたい。
そのためにuseEffectでaxios.getを宣言してURLより取得。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=e37192690e181c31&lat=34.67&lng=135.52&range=5&order=4' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

TyoeScript
1useEffect(() => {
2    axios.get('http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=${API_KEY}&lat=34.67&lng=135.52&range=5&order=4',{
3      headers: {
4        "Access-Control-Allow-Origin": "*",
5        "Access-Control-Allow-Methods": "POST,GET,PUT,DELETE",
6        "Access-Control-Allow-Headers": "Content-Type"
7      }
8    })//URL
9    .then(res => {
10      setStoreDate(res.data)
11      console.log(res);
12    })
13    .catch(error=>{
14      //失敗した時の処理
15      console.log('エラーやで');
16      console.log(typeof(error));
17    })
18}, [])

試したこと

エラー文より、CORSエラーが発生していてheaderを書きなさい、とのことだったので
https://syachiku.net/react-axios-cors/
上記サイトを参考に

 headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST,GET,PUT,DELETE",
        "Access-Control-Allow-Headers": "Content-Type"
      }

を追記してみたが、エラー内容変わらず。。。
どなたかCORSエラーについてについてお分かりになる方、ご教授いただけると大変嬉しいです…！
※APIのURL自体は直接アクセスできること確認済み。

補足情報（FW/ツールのバージョンなど）

"next": "13.0.6",
"react": "18.2.0",
"axios": "^1.2.1",

kawax

2022/12/12 05:04

何万回も同じ質問が繰り返されてるので答えることはない。根本的な原因は「APIはフロントのJSから使うもの」という完全に間違った思い込み。フロントから使えないAPIなんていくらでもある。?key=${API_KEY}で書いてる公開できないキーはJSに書いたら他人から見えるってことを理解できてない。Nextとか使う前に誰でも知ってる常識レベルのことを身に付けるのが先。