Zenn
🚀

フロントでバックエンドへのプロキシができない

に公開
frontend
プロキシ
tech

エラー

ローカルで動かしたvueのフロント画面で操作したリクエストを、バックエンドにプロキシする際にプロキシできなかった不具合について備忘録として残しておく。（画面にエラーメッセージ等は出力されなかった）

解決策：バックエンドのURL指定を「127.0.0.1⇒localhost」に変更

例えば以下のように、Frontend/Backendそれぞれで指定しているBackendのURL指定を127.0.0.1⇒localhostに変更することで、プロキシができた。

Frontend

.env
BACKEND_API_BASE_URL="http://127.0.0.1:8001"
# BACKEND_API_BASE_URL="http://localhost:8001" プロキシできない
nuxt.config.ts
  // ランタイム設定
  runtimeConfig: {
    backendApiBaseUrl: process.env.BACKEND_API_BASE_URL || 'http://127.0.0.1:8001'
    // backendApiBaseUrl: process.env.BACKEND_API_BASE_URL || 'http://localhost:8001' プロキシできない
  },

Backend

.env
ALLOWED_CORS_ORIGIN="http://127.0.0.1:3000"
# ALLOWED_CORS_ORIGIN="http://localhost:3000" プロキシできない

原因：

プロキシ不具合関連でググってみたら以下がヒットした。
https://qiita.com/kiyokanishiyama/items/cce66507ebc6facde39f
まとめると、localhostは従来IPv4では127.0.0.1を指していたが、現在はIPv6の::1が一般的で、IPv6未対応のサーバーでは接続失敗することがあり、Windows環境では127.0.0.1を直接指定することで接続が成功する場合があるとのこと、、、

Discussion