Ajax请求SpringMVC Json数据报错Http 400（一）
Ajax请求SpringMVC Json数据报错Http 400（一）
Ajax请求SpringMVC Json数据报错Http 400（一）
作者:幽鸿 Apr 15, 2016 9:40:55 PM
最近在完善博客的过程中，发现了一些细节问题。后台使用的是SpringMvc，前台使用的是jquery请求。之前后台采用的是
@RequestMapping标签，直接返回视图。最近脑子发热，觉得返回通用格式json数据比较好。于是逐步修改，在修改过程中，踩了
一个坑，就是前台页面请求后台的时候，后台使用@RequsetBody和RequestParam进行转换请求对象，报了http 400 Bad Request错
误。于是就引出了这篇文章。
一下子觉得这篇文章想说的东西很多，什么是http 400错误？为什么Spring MVC接受数据会报出400错误？@RequestBody和@RequestParam的底层又是怎们实现的呢？等等一些列问题，简而言之，本文就简单探讨下这个请求的前台和后台实现吧。
一、再现场景，搭建好测试环境
首先我的前台代码如下：
test ajax
function testAjax()
{
var html="<h2>授权用户Test</h2><br><br>";
html+='<form id="#authForm" method="post">';
$.ajax({
url : 'http://localhost:8080/Blog/authMenus.html',
type : 'POST',
// contentType : 'application/json',
data : {"userId":'27'},
dataType : 'json',
success : function(data) {
$.each(data,function(k,v){
html+='<input type="checkbox" name="authCheck" value="'+v.id+'"';
if(v.status==1)
html+='checked="'+v.status+'"';
html+='>'+v.name+' ';
if((k+1)%5==0){
html+='<br>';
}
});
html+='<br><br><br>';
html+='<a href="javascript:authSubmit()" id="authBtn" class="easyui-linkbutton">授 权</a>';
html+='</form>';
$('#auth').html(html);
},
error : function(data) {
alert('查询菜单失败!');
}
});
}
Hello World首先，当我们前台访问url : 'http://localhost:8080/Blog/authMenus.html'的时候会报“No 'Access-Control-Allow-Origin' header is present on the requested resource”错误，这是个什么错误呢？原来当我们的ajax请求其他域名的时候，就是跨域的场景了。什么是跨域呢？简单来说，就是一个域名里的请求访问另外一个域名里的服务，就是跨域了。我这里，是直接把上面代码写在本地的html页面了，访问的url为：file:///C:/Users/*****/Desktop/****/testAjax.html，注意开头啦，而我们请求的服务器地址为http://localhost:8080开头。明显跨域了。
那么怎么解决这个问题呢？其实很简单，在SpringMvc方法里加入HttpServletResponse response,并且给response加一个header，代码如下：
@ResponseBody
@RequestMapping(value="/authMenus.html", produces = "text/html;charset=UTF-8")
public String getAuthMenus(@RequestParam(value="userId",required=true) String userId,HttpServletRequest request,HttpServletResponse response) {
response.addHeader("Access-Control-Allow-Origin", "*");腾讯云开发者
