SpringBoot跨域资源共享CORS支持
传统的Ajax请求只能获取在同一域名下的资源,但是HTML5打破了这种限制,允许Ajax发起跨域请求。浏览器本身可以发起跨域请求的,比如可以链接一个外域的图片或者脚本,但是javascript脚本是不能获取这些外域资源内容的。
CORS是一个W3C标准,全称是“跨域资源共享”(Cross-origin resource sharing),它允许浏览器向跨资源服务器发出XMLHttpRequest请求,从而克服了Ajax只能同源使用的限制。
这种CORS使用了一个额外的HTTP响应头来赋予当前user-agent(浏览器)获得非同源资源的权限,这里的非同源就是Cross-Origin的概念,这里的权限就是访问非同的资源权限。
如果访问协议、端口、host都相同则称之为同源,否则为非同源。
先验证一下不做任何配置能否进行跨域资源请求,这里的Ajax请求192.168.3.20是我本机的ip,虽然还是访问本机,但是用的不是localhost,所以host是不相同的。
@RequestMapping("/test")
public String testCORS() {
return "test";
}
@GetMapping("/cors")
@ResponseBody
public String getCorsData() {
return "cors data";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试跨域资源请求</title>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "GET",
url: "http://192.168.3.20:8080/cors",
dataType: "text",
success: function (data) {
alert(data)
}
})
});
</script>
</head>
<body>
</body>
</html>
可以在控制台看到报错信息,这个请求因为CORS策略被阻塞。
![](https://i-blog.csdnimg.cn/blog_migrate/11e037668f9d38959c23647918851fc7.png)
如果要希望js请求可以获取跨域资源,就需要在配置类中增加允许跨域的请求,这里添加的是所有访问都可以跨域请求。
@Configuration
public class MyConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
};
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/e575ad28361039c3b63229fe26b7a426.png)