使用webpack-dev-server的React应用无法向Flask后端发送POST请求

我之前在开发类似的项目时也碰到过一模一样的情况——GET请求正常，POST就报400，结合你的代码和场景，大概率是下面几个原因导致的，咱们一步步来排查解决：

1. Flask后端未正确解析JSON请求体 #

Flask默认不会自动解析JSON格式的请求体，如果你在后端还是用request.form或者直接读取request.data来获取参数，那肯定会拿不到数据，进而返回400错误。

正确的做法是用request.get_json()方法来解析JSON请求体，而且要处理解析失败的情况（比如请求体不是合法JSON）。给你一个示例路由代码：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/login', methods=['POST'])
def handle_login():
    # 关键：用get_json()解析JSON格式的请求体
    request_data = request.get_json()
    
    # 如果解析失败（比如请求体不是合法JSON），返回400
    if not request_data:
        return jsonify({"error": "Invalid JSON payload"}), 400
    
    first_name = request_data.get('first_name')
    return jsonify({"message": f"Received name: {first_name}"}), 200

2. webpack-dev-server代理配置缺失或错误 #

因为你用了webpack-dev-server做本地开发，前端发起的/api/login请求需要被代理到Flask的服务地址（比如http://localhost:5000）。如果代理配置不对，可能导致请求在转发过程中丢失了请求头、请求体，或者根本没发到正确的后端服务。

检查你的webpack.config.js，确保devServer里配置了正确的代理：

module.exports = {
  // 其他webpack配置...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 替换成你的Flask服务运行地址
        changeOrigin: true, // 必须开启，否则后端可能会因为Host头问题拒绝请求
        secure: false // 如果Flask用的是http而非https，设为false
      }
    }
  }
};

配置完后记得重启webpack-dev-server，让配置生效。

3. 确认请求的实际发送内容 #

有时候代码里写的请求头和body看起来没问题，但实际发送的请求可能有问题。你可以打开浏览器的开发者工具（按F12），切换到Network标签，找到这个POST请求：

• 检查Request Headers里的Content-Type是否确实是application/json
• 查看Request Payload里的JSON格式是否正确，有没有语法错误

如果这里显示的内容和你代码里构造的不一致，那就要排查前端代码的问题了。

4. 检查Flask路由的方法配置 #

虽然你说GET请求正常，但还是要确认Flask的路由是否明确允许POST方法：

# 确保methods里包含POST
@app.route('/api/login', methods=['GET', 'POST'])

如果路由只允许GET，那POST请求会返回405错误，但你遇到的是400，所以这个可能性较低，但还是可以快速确认一下。

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