上一章简单介绍了SpringBoot全局异常处理(三十),如果没有看过,请观看上一章
本章节参考 江南一点雨大神的文章: Spring Boot2 系列教程(十四)CORS 解决跨域问题
一. 跨域问题
一.一 浏览器的同源策略
同源策略是由 Netscape 提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，
现在所有支持 JavaScript 的浏览器都会使用这个策略。
所谓同源是指协议、域名以及端口要相同。
同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，
由于各种原因又经常有跨域的需求，传统的跨域方案是 JSONP，JSONP 虽然能解决跨域但是有一个很大的局限性，
那就是只支持 GET 请求，
不支持其他类型的请求，而今天我们说的 CORS（跨域源资源共享）
（CORS，Cross-origin resource sharing）是一个 W3C 标准，
它是一份浏览器技术的规范，提供了 Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，
这是 JSONP 模式的现代版。
一.二 验证同源策略，复现跨域问题
创建两个项目，一个是服务的提供者， SpringBoot_Cors_Provider (服务提供者),
SpringBoot_Cors_Consumer (服务的消费者)，
这两个项目均是 SpringBoot整合Thymeleaf 的相关项目
一.二.一 服务提供者
端口号是 8081, 服务路径为: Cors_Provider
一.二.一.一 提供服务
@Controller
public class InfoController {
/**
* 跳转到主页
* @param model
* @return
*/
@RequestMapping("/index")
public String info(Model model){
return "index";
}
@GetMapping("/findById")
@ResponseBody
public User findById(Integer id){
User user=new User();
user.setId(id);
user.setName("两个蝴蝶飞");
user.setDescription("Get 提交 跨域问题");
return user;
}
@PostMapping("/addUser")
@ResponseBody
public User addUser(@RequestBody User user){
//补充信息
user.setName("岳泽霖");
user.setDescription("POST提交 跨域问题");
return user;
}
}
一.二.一.二 首页 index.html
<body class="container">
<!--展示信息-->
提供者: <p id="message" style="margin-top:200px;"></p>
<button type="button" class="btn btn-success" id="get_submit">Get获取信息</button>
<button type="button" class="btn btn-success" id="post_submit">Post获取信息</button>
<script type="text/javascript" src="webjars/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>
<script>
$(function(){
})
//get请求
$("#get_submit").click(function(){
$.ajax({
async:false,
type:"get",
url:"findById?id=1",
success:function(data){
$("#message").text(
JSON.stringify(data)
);
}
});
});
//post 请求
$("#post_submit").click(function(){
$.ajax({
async:false,
type:"post",
url:"addUser",
data:JSON.stringify({
"id":2
}),
dataType:"json",
contentType:"application/json;charset=utf-8",
success:function(data){
$("#message").text(
JSON.stringify(data)
);
}
});
});
</script>
</body>
一.二.一.三 服务提供者验证
get 请求
post 请求
一.二.二 服务消费者
端口号是 8082, 项目路径是 Cors_Consumer
只需要一个前端的静态页面 index.html 和 一个跳转方法即可。
一.二.二.一 controller层跳转
@Controller
public class InfoController {
/**
* 普通展示
* @param model
* @return
*/
@RequestMapping("/index")
public String info(Model model){
return "index";
}
}
一.二.二.二 首页 index.html
<body class="container">
<!--展示信息-->
消费者: <p id="message" style="margin-top:200px;"></p>
<button type="button" class="btn btn-success" id="get_submit">Get获取信息</button>
<button type="button" class="btn btn-success" id="post_submit">Post获取信息</button>
<script type="text/javascript" src="webjars/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>
<script>
$(function(){
})
//get请求
$("#get_submit").click(function(){
$.ajax({
async:false,
type:"get", //填写具体的路径
url:"http://localhost:8081/Cors_Provider/findById?id=1",
success:function(data){
$("#message").text(
JSON.stringify(data)
);
}
});
});
//post 请求
$("#post_submit").click(function(){
$.ajax({
async:false,
type:"post", //填写具体的路径
url:"http://localhost:8081/Cors_Provider/addUser",
data:JSON.stringify({
"id":2
}),
dataType:"json",
contentType:"application/json;charset=utf-8",
success:function(data){
$("#message").text(
JSON.stringify(data)
);
}
});
});
</script>
</body>
一.二.二.三 跨域请求
CORS error
端口号不同，不属于同源，所以无法访问。
注意，是浏览器无法访问， 如果是用 Postman 的话，是可以正常请求通过的
如果是后端之间通过 RestTemplate, Feign 等相互调用，也是可以访问到的。
(所以，不要说，我接口 postman没有问题啊，你前端怎么访问不到呢)
二. Cors 解决跨域文案
针对的都是服务提供者端， SpringBoot_Cors_Provider 项目里面进行操作.
@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
@Deprecated
String[] DEFAULT_ORIGINS = {"*"};
@Deprecated
String[] DEFAULT_ALLOWED_HEADERS = {"*"};
@Deprecated
boolean DEFAULT_ALLOW_CREDENTIALS = false;
@Deprecated
long DEFAULT_MAX_AGE = 1800;
@AliasFor("origins")
String[] value() default {};
@AliasFor("value")
String[] origins() default {};
String[] allowedHeaders() default {};
String[] exposedHeaders() default {};
RequestMethod[] methods() default {};
String allowCredentials() default "";
long maxAge() default -1;
}可以在类上，也可以在方法上.
通常使用 origins 属性 和 maxAge 属性， 为-1 表示永不过期.
二.一 单方法 单类处理
二.一.一 单方法
添加 @CrossOrigin 注解， 用 origins 属性来指定
//端口号后面不能跟 /
@CrossOrigin(origins = "http://localhost:8082")
@GetMapping("/findById")
@ResponseBody
public User findById(Integer id){
User user=new User();
user.setId(id);
user.setName("两个蝴蝶飞");
user.setDescription("Get 提交 跨域问题");
return user;
}
只能是 http 协议， localhost 主机， 8082 端口的请求可以访问
重启服务，再次请求，就可以获取到了
@PostMapping("/addUser")
@ResponseBody
@CrossOrigin(origins = "*")
public User addUser(@RequestBody User user){
//补充信息
user.setName("岳泽霖");
user.setDescription("POST提交 跨域问题");
return user;
}origins="*" ,表示所有的协议，所有的主机 ，所有的端口 均可以访问.
重启服务器，再次进行请求
是可以的。
这是针对每一个方法的。 如果一个类里面，方法过多，显然这种方式是不合理的.
二.一.二 单类
在类上添加该注解
@Controller
@CrossOrigin(origins = "*")
public class InfoController {
}
则这个类下面的所有的方法，都可以 进行跨域访问。
当类过多时，这种方式也不太友好。
二.二 CorsConfig 配置全局性跨域
在 config 目录下，创建 CorsConfig 配置类
@Configuration
public class CorsConfig {
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
//设置你要允许的网站域名，如果全允许则设为 *
config.addAllowedOrigin("*");
//config.addAllowedOrigin("http://localhost:8082");
//设置要限制的Header和Method
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
//bean注册顺序
bean.setOrder(0);
return bean;
}
}
同样是可以的.
二.三 添加 Cors映射
在 WebConfig 目录下， 添加相应的 cors 映射 配置
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
/**
* 配置静态的资源信息
* @param registry
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
//映射 static 目录
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
//放置其他 业务页面资源
registry.addResourceHandler("/**").addResourceLocations("classpath:/templates/");
}
/**
进行添加配置
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
//是否发送Cookie
.allowCredentials(true)
//放行哪些原始域
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*")
.allowCredentials(true);
}
}
同样是可以的
但是，通过这种方式配置的话， 自定义的拦截器会不生效。
一般采用的，都是第二种方式 CorsConfig
本章节的代码放置在 github 上:
https://github.com/yuejianli/springboot/tree/develop/SpringBoot_Cors_Provider
https://github.com/yuejianli/springboot/tree/develop/SpringBoot_Cors_Consumer
谢谢您的观看，如果喜欢，请关注我，再次感谢 !!!