Vue-Admin-Template下Flask POST请求返回400错误：如何解决request.js与Axios请求差异？-Python教程-PHP中文网

Vue-Admin-Template下Flask POST请求返回400错误：如何解决request.js与Axios请求差异？

花韻仙語

发布： 2025-02-19 17:40:01

原创

831人浏览过

vue-admin-template下flask post请求返回400错误：如何解决request.js与axios请求差异？

Vue-Admin-Template与Flask POST请求的400错误排查与修复

本文探讨在使用Vue-Admin-Template前端框架和Flask后端框架时，POST请求返回400错误的问题。该问题源于request.js和axios发送请求方式的差异，导致Flask后端无法正确解析JSON数据。

问题分析：

使用request.js发送POST请求时，Flask接收到的request.data类型为字符串(str)，即使is_json值为true，Flask也无法直接解析为JSON对象，从而返回400错误。而axios发送的request.data类型为字节流(bytes)，Flask可以正确解析。

立即学习“前端免费学习笔记（深入）”；

解决方案：

为了解决此问题，需要同时调整前端和后端代码：

前端修改 (request.js):

将request.js中的data参数转换为JSON字符串，并设置正确的Content-Type头部信息：

export function addperson(data) {
  return request({
    url: '/webapi/addperson',
    method: 'post',
    data: JSON.stringify(data), // 关键：将data转换为JSON字符串
    headers: {
      'Content-Type': 'application/json' // 关键：设置正确的Content-Type
    }
  })
}

登录后复制

后端修改 (Flask):

在Flask后端，使用request.get_json(force=True)强制将request.data解析为JSON对象：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/addPerson', methods=['POST'])
def addPerson():
  try:
    data = request.get_json(force=True) # 关键：强制解析JSON数据
    # ... 处理 data ...
    return jsonify({"message": "success"})
  except Exception as e:
    return jsonify({"message": "error", "detail": str(e)}), 400

登录后复制

其他注意事项：