vue-admin-template向flask发起post异常

  • Z时代
  • 2024-03-02
  • 分类：IT

vue-admin-template向flask发起post异常

前端使用了vue-admin-template，后端是flask

使用框架封装的request.js向flask发送post请求时，flask一直报错，控制台输出400错误；但如果使用axios发送请求，flask就可以正常响应。

经过在flask调试对比两种post方式，发现区别在于后台获得的request.data类型不同:
当使用axios时

axios({ method: 'post',
            url: 'http://127.0.0.1:5000/addPerson',
            data: this.form
          }).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.dialogVisible = false;
            this.fetchData();
          });
@app.route('/addPerson', methods=['POST'])
def addPerson():
    data = request.get_json(silent=True)
    return jsonify(data)

后台获得的request.data是bytes类型，此时可以正常解析，json值正常。从调试窗口可以看到

data={bytes}b'{"key": "value", ......}'

当使用request.js时

// vue代码
addPerson(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.dialogVisible = false;
            this.fetchData();
          });
// api代码
export function addPerson(data) {
  return request({
    url: '/webapi/addPerson',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

此时后台获得的request.data是str类型，is_json为true，但data和json提示错误

data={str}'Traceback(most recent call last): ......'
400 Bad Request: The browser (or proxy) sent a request that this server could not understand.

求教各位大神，如果想使用框架封装的request.js的话，这个问题怎么解决，是在哪里修改配置，还是要改代码，改代码的话，是改前段还是后端？谢谢！

以上是 vue-admin-template向flask发起post异常 的全部内容， 来源链接： utcz.com/p/936881.html

回到顶部