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提交的四种常见消息主体格式的博客推荐给大家。

推荐阅读更多精彩内容