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

屈䶮浩
  • 1
新手上路,请多包涵

前端使用了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的话,这个问题怎么解决,是在哪里修改配置,还是要改代码,改代码的话,是改前段还是后端?谢谢!

回复
阅读 557
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏