最近项目上不是很紧,想利用这段时间学学Es6的新特性,今天正好学到ES6为了解决js“回调地狱”问题出的Promise新对象。于是就使用以前写的SpringBoot项目做后台,前台就新写一个HTML文件。前后台都准备好了,就着手准备用ajax试试看接口可不可以走通,于是本次文章的主角便出现了--ajax post请求的跨域问题。
为什么会出现跨域问题?
首先我们要先了解一个概念--同源策略。同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。目的是出于安全考虑,防止js脚本随意调用其他网站的资源。
问题描述
先把前后台的代码贴出来
后台controller
//query all user
@ResponseBody
@RequestMapping(value = "/getAllUser",method= RequestMethod.POST)
public List<User> getAllUser(@RequestBody Map<String,Object> reqMap){
return userService.findAllUser(reqMap);
}
前台js
$.ajax({
url:'http://localhost:8080/user/getAllUser',
data:{pageNum:3, pageSize:3},
type:'post',
dataType:'json',
contentType: "application/json",
success:function(data){
alert("success");
console.log(data);
},
error:function(reason){
console.log(reason)
}
});
显示如下错误,经查询后发现是跨域导致的错误
后台改进
在Application启动类中注册WebMvcConfigurer
@Bean
public WebMvcConfigurer webMvcConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*");
}
};
}
重新启动项目后浏览器报400错误
经过研究后发现是Json格式错误,ajax请求的是json格式,但是ajax发送过去的参数显然不是json格式,所以我们还需要将参数格式化为json格式然后传到后台。使用JOSN.stringify方法
改正后的后台代码:
$.ajax({
url:'http://localhost:8080/user/getAllUser',
data:JSON.stringify({pageNum:3, pageSize:3}),
type:'post',
dataType:'json',
contentType: "application/json",
success:function(data){
alert("success");
console.log(data);
},
error:function(reason){
console.log(reason)
}
});
再次刷新页面