質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

8751閲覧

【axios】CORSエラーについて

mmmxxxzelda

総合スコア1

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/12/12 01:36

前提

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",

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/12/12 05:04

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

回答1

0

おそらくAPI側の「Access-Control-Allow-Origin」の問題ですのでサーバー側で対応ください

投稿2022/12/12 02:13

yambejp

総合スコア116192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問