React前端通过Axios调用Flask接口无法打印请求携带数据的问题排查

核心问题根源 #

• GET请求携带请求体的兼容性缺陷：前端将请求方法设为GET，同时给Axios传data字段想把数据放在请求体里，这是取不到数据的核心原因。按照HTTP规范，GET请求的语义是从服务端获取资源，多数浏览器、网络中间层（CDN、反向代理）会直接丢弃GET请求携带的请求体，就算Axios尝试把data塞进请求体，这部分数据根本不会传到Flask后端，和你终端打印出空内容的表现完全匹配。
• Flask端取值逻辑错误：就算请求真的带了JSON格式的请求体，直接打印request.data也拿不到可用数据——request.data是未解析的原始字节流，正常解析前端传的JSON数据应该用Flask内置的request.get_json()方法，直接读原始字节流既看不到结构化数据，也容易因为编码问题出错。
• 前端配置冗余且无效：给Axios加的crossOrigin: '*'不属于Axios的有效配置项，这个属性是DOM标签的跨域属性，对Axios的XMLHttpRequest请求完全不生效，跨域问题本身靠后端@cross_origin()装饰器就可以处理；另外GET请求手动设置Content-Type: application/json也属于多余配置，甚至可能触发不必要的跨域预检请求。

最优实现方案 #

场景1：登录接口的标准实现（推荐） #

按照HTTP规范，携带用户凭据的登录操作应该用POST请求，不要用GET（GET参数会被记录在浏览器历史、服务器日志里，存在安全风险）：

• 前端Axios调整方向：
  • 把请求方法改为POST
  • 去掉手动JSON.stringify步骤，直接把loginData对象传给data字段，Axios会自动完成JSON序列化、设置对应的请求头
  • 删掉无效的crossOrigin配置和手动写的Content-Type头
    调整后的示例代码：

  const options = {
    method: 'POST',
    url: `${flaskEndpoint}/login`,
    data: loginData
  }
  

• 后端Flask调整方向：
  • 给路由加上POST方法的允许配置
  • 用request.get_json()解析前端传的JSON数据
    调整后的示例代码：

  @app.route('/login', methods=['POST'])
  @cross_origin()
  def login():
    login_data = request.get_json()
    print(login_data)
    return "Hello World"
  

场景2：必须使用GET请求的传参实现 #

如果业务逻辑上确实需要用GET方法，不要把参数放在请求体里，改用URL查询参数传递：

• 前端Axios调整：把原来的data字段换成params字段，传入要携带的参数对象，Axios会自动把对象拼接到URL后面形成标准的查询字符串：

  const options = {
    method: 'GET',
    url: `${flaskEndpoint}/login`,
    params: loginData
  }
  

• 后端Flask调整：用request.args对象读取URL上的查询参数：

  @app.route('/login')
  @cross_origin()
  def login():
    username = request.args.get('username')
    print(username)
    return "Hello World"
  

常见避坑提示 #

• 永远不要在GET请求里靠data字段传业务参数，这种写法在本地开发可能偶尔能通，但上线后遇到网络层拦截会直接丢数据，排查成本极高
• Flask端接收前端JSON时，优先用request.get_json()，如果担心请求不是JSON格式，可以传入silent=True参数避免解析报错
• 跨域配置完全由后端flask-cors处理，前端不需要额外加跨域相关的Axios配置

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