フロント(next.js)とバックエンド(nest.js)で分けて作成し、APIでデータのやり取りを行う、webAppを作成しています。
ローカルホストで、それぞれ起動して実装を進めていましたが、
APIにAuthorizationヘッダーをつけたところ、突然以下のようなエラーが発生しました。
Access to fetch at 'http://localhost:8000/api/post/userId/1234567' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
調べたところ、
APIにAuthorizationヘッダーをつけたことにより、preflight requestが飛ぶ条件に当てはまってしまい、preflight request時にヘッダーを削除してしまう
みたいなところまでは出てきました。
しかし調べても、Authorizationヘッダーをつけたまま、これを回避する方法がよくわかりませんでしたので、ご教授いただけたらと思います。
フロント側でAPIをリクエストしている方法は、以下の通りです。
(PostmanでAPIのリクエスト自体には成功しているのでバックエンド側は問題ない認識です。)
const url = "http://localhost:8000/api/post/userId/1234567"; const request = { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", "Authorization": localStorage.getItem('token'), }, body: params } const response = await fetch(url, request); const posts = await response.status return posts
回答1件
あなたの回答
tips
プレビュー