springmvc解决ajax post json格式数据的跨域
前言：今天解决js跨域，搞了一下午，呜呜，以下是我整理的一些解决方法。
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JsonTest</title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div id="d1">
<button id="btn" type="button">click me</button>
</div>
<script type="text/javascript">
var jsonData = JSON.stringify({"username":"杨静", "passwprd":"12345", "address":"上海市"});
$("#btn").on("click", function () {
$.ajax({
url:'http://127.0.0.1:8898/api/json',
contentType: 'application/json;charset=UTF-8',
type:'POST', //GET
data: jsonData,
dataType:'json',
success : function (data) {
console.log(data);
$("#d1").append("<span>" + JSON.stringify(data["code"]) + "</span> <br />");
$("#d1").append("<span>" + JSON.stringify(JSON.stringify(data)) + "</span> <br />");
}
});
});
</script>
</body>
</html>
普通参数跨域：
服务端在response的头文件添加
httpServletResponse.setHeader("Access-Control-Allow-Origin","*");
httpServletResponse.setHeader("Access-Control-Allow-Methods","POST");
httpServletResponse.setHeader("Access-Control-Allow-Headers","Access-Control");
httpServletResponse.setHeader("Allow","POST");
Access-Control-Allow-Origin:| * // 授权的源控制
Access-Control-Max-Age:// 授权的时间
Access-Control-Allow-Credentials: true | false // 控制是否开启与Ajax的Cookie提交方式
Access-Control-Allow-Methods:[,]* // 允许请求的HTTP Method
Access-Control-Allow-Headers:[,]* // 控制哪些header能发送真正的请求
观察响应头
Paste_Image.png
带headr请求跨域:
这样客户端需要发起 OPTIONS请求， 可以说是一个“预请求”，用于探测后续真正需要发起的跨域 POST 请求对于服务器来说是否是安全可接受的，因为跨域提交数据对于服务器来说可能存在很大的安全问题。
因为Springmvc模式是挂壁OPTIONS请求的，所以需要开启。
Spring MVC 从4.2版本开始增加了对CORS的支持
在Spring MVC 中增加CORS支持非常简单，可以配置全局的规则，也可以使用@CrossOrigin
注解进行细粒度的配置。
使用@CrossOrigin注解
先通过源码看看该注解支持的属性：
在Controller上使用@CrossOrigin注解
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
@RequestMapping("/{id}")
public Account retrieve(@PathVariable Long id) {
// ...
}
@RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
public void remove(@PathVariable Long id) {
// ...
}
}
这里指定当前的AccountController中所有的方法可以处理所有域上的请求，
在方法上使用@CrossOrigin注解
@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
@CrossOrigin("http://domain2.com")
@RequestMapping("/{id}")
public Account retrieve(@PathVariable Long id) {
// ...
}
@RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
public void remove(@PathVariable Long id) {
// ...
}
}
在这个例子中，AccountController类上也有@CrossOrigin注解，retrieve方法上也有注解，Spring会合并两个注解的属性一起使用。
CORS全局配置
除了细粒度基于注解的配置，你可能会想定义一些全局CORS的配置。这类似于使用过滤器，但可以在Spring MVC中声明，并结合细粒度@CrossOrigin配置。默认情况下所有的域名和GET、HEAD和POST方法都是允许的。
基于JAVA的配置
看下面例子：
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
}
您可以轻松地更改任何属性，以及配置适用于特定的路径模式的CORS：
如果你使用Spring Boot，你可以通过这种方式方便的进行配置。
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://domain2.com")
.allowedMethods("PUT", "DELETE")
.allowedHeaders("header1", "header2", "header3")
.exposedHeaders("header1", "header2")
.allowCredentials(false).maxAge(3600);
}
}
不限制任何请求（方便复制粘贴）
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "TRACE");
}
}
基于XML的配置
<mvc:cors>
<mvc:mapping path="/**" />
</mvc:cors>
这个配置和上面Java方式的第一种作用一样。
同样，你可以做更复杂的配置：
<mvc:cors>
<mvc:mapping path="/api/**"
allowed-origins="http://domain1.com, http://domain2.com"
allowed-methods="GET, PUT"
allowed-headers="header1, header2, header3"
exposed-headers="header1, header2" allow-credentials="false"
max-age="123" />
<mvc:mapping path="/resources/**"
allowed-origins="http://domain1.com" />
</mvc:cors>
我用的方式是基于xml的方式，结果如下：
Paste_Image.png
