Vue.js+Axios调用Django REST Framework POST/PUT接口返回400错误求助

问题根因及解决方案 #

1. 请求字段与序列化器要求不匹配 #

你在Axios的POST、PUT请求中传递的参数结构为{data:this.DoctorName}，但你的Doctors模型及对应序列化器需要接收的字段名为name（可通过你的editClick方法中this.DoctorName=doc.name的取值逻辑佐证），字段不匹配触发DRF参数校验失败，返回400错误。

2. PUT请求路由缺少尾部斜杠 #

Django默认会将缺少尾部斜杠的请求自动重定向到带斜杠的地址，但POST、PUT类请求在重定向过程中会丢失请求体，也会触发400错误。

3. 多余的表单序列化操作 #

你使用Qs.stringify将参数序列化为表单编码格式，DRF默认优先解析JSON格式请求，直接传递JS对象即可，Axios会自动配置正确的Content-Type请求头。

修正后的Axios请求代码 #

只需修改createClick和updateClick两个方法即可：

createClick(){
    axios.post(variables.API_URL+"doctor/", {
        name: this.DoctorName
    })
    .then((response)=>{
        this.refreshData();
        alert(response.data);
    });
},
updateClick(){
    axios.put(variables.API_URL+"doctor/"+this.DoctorId + "/", {
        name: this.DoctorName
    })
    .then((response)=>{
        this.refreshData();
        alert(response.data);
    });
},

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