Vue CLI3でProxy error: Could not proxy request xxx to yyy

2020年8月22日

今回はVue CLI3でProxy error: Could not proxy request xxx to yyyというエラーが起きたときに確認したいことについてご紹介いたします。

Vue CLI3でProxy error: Could not proxy request xxx to yyy

まず表題のエラーが起きたときの経緯をご紹介いたします。

Vue CLI3でvue.config.jsでproxyの設定を下記のようにいたしました。（細部は変えております）

proxyの設定をすることで、APIのドメイン部分を自由に変換することができますね。

しかし、上記の設定をしたところ、APIの実行時に表題の「Proxy error: Could not proxy request xxx to yyy」というエラーが起きてAPIのドメイン部分の向き先の変更ができない状態でした。

その後、いろいろ試行錯誤をしたところ、「npm run build」でproduction環境にしたところ、上記エラーは消えました。
ただ、上記エラーは消えたものの、今度は400のbad requestのエラーが出てしまいました。

そもそもなぜわざわざvue.config.jsでproxyの設定をしたかというと、localhostを使用していてCORSのポリシーによるエラーが起きたからです。

それを回避する方法を模索する上で、vue.config.jsでproxyの設定を変えるという結論に至りました。

いろいろ試して思いましたが、仮説ですがvue.config.jsで設定したとしても、CORSのポリシーによるエラーが何か関わっているせいでうまくいかないのかもしれません。
要するに、ちょっとvue.config.jsをいじることを試してうまくいかなかったら別のCORSのポリシーエラーを解決する方法を探してその方法に切り替えてみるのが良いかもしれません。

私も他に様々な方法を試して表題のエラーを解決していこうと思います。

終わりに

今回はVue CLI3でProxy error: Could not proxy request xxx to yyyというエラーが起きたときに確認したいことについてご紹介いたしました。