Flask+React代理配置无效：请求仍指向3000端口求助

问题现状 #

• React 前端运行在 localhost:3000，Flask 后端运行在 localhost:5000，后端单独测试功能正常
• 已在 package.json 中配置 "proxy": "http://localhost:5000"，但前端请求仍指向 3000 端口
• 控制台报错：Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"

代码片段 #

App.js #

import React, {useState, useEffect} from 'react'

function App() {

  const [data, setData] = useState([{}])

  useEffect(() => {

    fetch("/members").then(
      res => res.json()
    ).then(
      data => {
        setData(data)
        console.log(data)
      }
    )
  },[])

  return (
    <div>App</div>
  )
}

export default App

server.py #

from flask import Flask

app =  Flask(__name__)

@app.route("/members")
def members():
    return {"members": ["member1", "member2", "member3"]}

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

解决步骤 #

1. 确认代理配置位置与重启服务 #

• 确保 proxy 配置在 package.json 的根层级，不要嵌套在 scripts 等其他字段内
• 修改配置后必须重启 React 开发服务器，热重载不会加载新的代理规则

2. 适配高版本 React 代理方案 #

如果使用 React 17+ 搭配 create-react-app 5.x 版本，原生 proxy 字段可能失效，改用 setupProxy.js：

1. 在项目 src 目录下新建 setupProxy.js 文件
2. 安装依赖：npm install http-proxy-middleware --save-dev
3. 在文件中添加以下代码：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   module.exports = function(app) {
     app.use(
       '/members',
       createProxyMiddleware({
         target: 'http://localhost:5000',
         changeOrigin: true,
       })
     );
   };
   

4. 重启 React 开发服务器

3. 验证后端路由有效性 #

直接在浏览器访问 http://localhost:5000/members，确认返回的是 {"members": ["member1", "member2", "member3"]} 格式的 JSON。如果返回 HTML 页面（比如404页面），说明后端路由配置有误。

4. 清除缓存干扰 #

• 用浏览器无痕模式测试请求，避免旧缓存响应干扰
• 重启 React 和 Flask 服务，清除服务端缓存

5. 临时手动指定请求地址 #

如果以上方法无效，可临时在 fetch 中写完整地址排查：

fetch("http://localhost:5000/members")
  .then(res => res.json())
  .then(data => {
    setData(data)
    console.log(data)
  })

如果此方式能成功，说明代理配置未生效，回到步骤1和2重新配置。

内容的提问来源于stack exchange，提问作者nebulaguy