package.json配置proxy后Ionic/React应用未使用该代理请求Flask接口

1 修复请求参数序列化错误 #

你当前代码中JSON.stringify的传参方式错误，会导致后端无法接收到完整的登录参数，这是触发500状态码的核心原因：

// 错误写法：JSON.stringify 第一个参数需要是完整的序列化对象
body: JSON.stringify(username, password)
// 修正后写法
body: JSON.stringify({username, password})

2 调整fetch配置 #

删除请求中的mode: "cors"配置，走本地代理的请求属于同域请求，跨域模式配置会干扰代理规则匹配：

await fetch(`/userlookup`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({username, password}),
});

3 确认代理配置生效条件 #

package.json中的proxy配置是Create React App脚手架提供的能力，需要满足以下规则才会生效：

• 配置完成后必须重启Ionic/React的开发服务，新配置才会加载
• 仅对非text/html类型的请求生效，不会代理静态资源、页面请求
• 如果你的Ionic项目未使用CRA脚手架初始化，该配置默认不生效，需要手动配置代理

4 手动配置代理（可选，原生proxy不生效时使用） #

如果原生proxy配置不生效，可以使用http-proxy-middleware自定义代理规则：

1. 安装依赖
   npm install --save-dev http-proxy-middleware
2. 在项目src目录下新建setupProxy.js文件，写入以下内容：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/userlookup',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

3. 重启前端开发服务即可生效

5 后端校验补充 #

确认Flask后端的/userlookup路由支持POST请求，且已经配置了JSON参数解析逻辑，示例参考：

from flask import Flask, request, jsonify
app = Flask(__name__)

@app.route('/userlookup', methods=['POST'])
def user_lookup():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')
    # 后续业务逻辑

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