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

実現したいこと

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

行動規範の内容に同意します

回答2件

ベストアンサー

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