axios: Network Errorでフロントとバックの接続にハマってしまったが解消できたので備忘録として
エラー概要
想定の挙動にならずDevtoolのコンソールにAxiosError: Network Errorが発生
Access to XMLHttpRequest ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
結論
IPv4ではなくIPv6に接続されていて Flask (バックエンド)につながっていなかった
検証内容
該当リクエストでレスポンス403が返ってきてしまう状態だったのでコマンドラインで以下を実行
-
Flaskがバインドしているか明示
curl -i http://localhost:5000/...出力結果: レスポンス: 403 Serverヘッダ: AirTunes/ ← Flaskに届いてない
-
localhostの接続先を確認
curl -i http://127.0.0.1:5000/...出力結果: レスポンス: 200 + JSON Serverヘッダ: Werkzeug/ ← Flaskに届いている
-
強制的にIPv4で接続し検証
curl -4 -i http://localhost:5000/...出力結果: レスポンス: 200 Serverヘッダ: Werkzeug/ ← Flaskに届いた！
-
強制的にIPv4で接続し検証
curl -6 -i http://localhost:5000/...出力結果: レスポンス: 403 Serverヘッダ: AirTunes/ ← Flaskに届いてない
追加観測 (lsof) 以下コマンドを実行
lsof -nP -iTCP:5000出力結果
ControlCe ... TCP *:5000 (LISTEN) Python ... TCP 127.0.0.1:5000 (LISTEN)ControlCe (macOS Control Center / AirPlay Receiver) が ポート5000を IPv6 / ワイルドカードで掴んでいる 一方、
Flask(Werkzeug) は IPv4 の 127.0.0.1 のみ で LISTEN → localhost (IPv6優先解決) が AirPlay に流れる。
原因
ブラウザは http://localhost:5000 へアクセスする際、OS の名前解決結果のうち IPv6 (::1) を優先していた
その IPv6:5000 を macOS AirPlay Receiver (Control Center) が LISTEN → 403 を返し、CORS ヘッダも当然付かない
Axios は 403 + CORS ヘッダ欠如を "Network Error" として報告（内部ではレスポンスが来ている）
Flask は 127.0.0.1:5000 (IPv4) には存在するため、直接 127.0.0.1 指定すれば成功する
つまり “サーバが壊れていた” のではなく、“名前 (localhost) が IPv6 で別プロセスを指していた” ことが本質。
解決策
vite.config.jsのtargetを直接差し替え
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:5000',
changeOrigin: true,
secure: false,
}
}
}
})
実際に行った手順（時系列）
1.Console で CORS エラー確認
2.Network タブで 403 / ヘッダに Server: AirTunes を発見
3.curl で localhost が 403 / 127.0.0.1 が 200 の差異を確認
4.lsof で ControlCenter 系プロセスが 5000 LISTEN を確認
5.暫定対応として axios baseURL を http://127.0.0.1:5000 に固定 → 直後に成功
6.追加で curl -4 / curl -6 で IPv4/IPv6 差異を再現し記録
7.再発防止策（proxy 導入候補 / ポート変更）
発生時のチェックリスト
[1] Console / Network でステータス確認 (403? CORS 文言?)
[2] curl -i http://localhost:5000/IncomeByYear
[3] curl -i http://127.0.0.1:5000/IncomeByYear
[4] curl -4 / curl -6 で差が出るか
[5] lsof -nP -iTCP:5000 | grep LISTEN
[6] Server ヘッダ: AirTunes? Werkzeug?
[7] 必要なら IPv4 固定 / 別ポート / Proxy を適用
[8] 直ったら手順を docs に追記
まとめ
本件のlocalhost 403 (AirTunes) 問題は “CORS 設定不足” ではなく “IPv6 で別サービスに到達” が原因。 → IPv4 指定 / ポート変更 / Proxy で即解決、再発時はヘッダと lsof を見る。