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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

2回答

3178閲覧

vueでfetch関数を使った時に CROS ポリシーに違反する

tasuuuuku

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

1クリップ

投稿2023/04/03 15:05

編集2023/04/03 15:11

実現したいこと

VueでFetch関数を呼び出した時のエラーを解決しようといています。
エラーの一つ目に CROSポリシーに反すると書いてあったので、'Access-Control-Allow-Origin': '*', を追加しましたがうまくいきませんでした。

もしかすると、 http://127.0.0.1:5000 がうまくいかないのかなとも思いましたが、分かりません。

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

Access to fetch at 'http://127.0.0.1:5000/api' from origin 'http://localhost:5173' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. CompareGbtModel.vue:23 POST http://127.0.0.1:5000/api net::ERR_FAILED

該当のソースコード

const fetched = await fetch(`http://127.0.0.1:5000/api`, { method: "POST", headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', }, body: JSON.stringify({ "prompt": "prompt", })

試した該当のソースコード

const fetched = await fetch('http://[::1]:5000/api`, { method: "POST", headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', }, body: JSON.stringify({ "prompt": "prompt", })

バックエンド Fastify のコンソール

(node:3615) [FSTDEP011] FastifyDeprecation: Variadic listen method is deprecated. Please use ".listen(optionsObject)" instead. The variadic signature will be removed in `fastify@5`. (Use `node --trace-warnings ...` to show where the warning was created) Server running on http://[::1]:5000

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

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

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

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

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

guest

回答2

0

ベストアンサー

Access to fetch at 'http://127.0.0.1:5000/api' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass ...

同じ localhost でもポートが異なるので要求はクロスドメインと見なされます。そのエラーは、ブラウザが CORS のためのプリフライトリクエストを出したが、 Web サーバーが CORS に対応してなくてブロックされたということのようです。

対応策は:

(1) どのような構成になっているか不明ですが、可能であれば、要求がクロスドメインにならないようにする。

(2) Web サーバー側で CORS 対応をする。クライアント側はブラウザの仕事で開発者は何もする必要はありません。プリフライトが必要か否かもブラウザが判断して CORS に必要な要求を出してくれます。

・・・のいずれかになると思います。


【追記】

もう一つ、プロキシを使うという方法もあるそうです。

Vue.jsとAPIサーバとのaxiosでCORSに引っかかった時のProxyを使った回避方法
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf

【Vue.js】ローカルサーバーでのCORSエラー対応
https://ishidalog.com/?p=37

投稿2023/04/03 23:23

編集2023/04/04 03:24
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

tasuuuuku

2023/04/05 02:22

プロキシサーバーを立てて解決することができました。さらにCROSについて勉強することもできました。誠にありがとうございました!
guest

0

'Access-Control-Allow-Origin': '*', を追加しました

そもそもCORSは外部ドメインのAPIなどの不正呼び出しを防止するものです。
なので、クライアント側にリクエスト時に回避できるようでは全く意味がありません。

そのヘッダーをつけるべきはAPI側のレスポンスの方です。

投稿2023/04/03 16:22

編集2023/04/03 16:25
pippi19

総合スコア684

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

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

tasuuuuku

2023/04/05 02:23

回答ありがとうございます!勉強あっせて頂きました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問