vue-resource POST请求 报400错误解决方案

相关技术

SpringMVC

vue-resource

问题描述

使用ajax向后端发送POST请求成功，但是改用vue-resource发送POST请求一直出现400 Bad Request 错误，代码及错误如下：

后端代码

AJAX正常请求

AJAX发送POST请求

http请求详情 成功

vue-resource异常请求

vue-reource POST请求代码

http请求详情 400错误

可以看出AJAX请求发送200 OK，而vue-resource请求发送400 Bad Request。

具体原因可以看出来在请求头中，前者的Content-Type=application/x-www-form-urlencoded，导致请求体中的数据格式为Form Data：key1=val1&key2=val2；而后者的Content-Type=application/json，导致请求体中的数据格式为Request PayLoad: {key1:val1,key2:val2}。显然服务端接收第一种参数格式而拒绝第二种，所以抛出400状态码。

所以要做的就是将vue-resource中的请求体中的参数格式指定为Form Data即可。

emulateJSON

boolean类型 默认值为false

用途：将request body以application/x-www-form-urlencoded content type发送

在发送POST请求的options选项中添加 {emulateJSON:true} 即可：

正确的POST请求

总结

请求头中的Content-Type字段会说明实体主体内对象的媒体类型。AJAX默认的Content-Type=application/x-www-form-urlencoded；vue-resource的POST请求默认的Contnet-Type=application/json；通过指定emulateJSON的值来指定vue-resource Content-Type的值。

另外，个人觉得写得非常好的HTTP的POST提交的四种常见消息主体格式的博客推荐给大家。