我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t") 跨域问题指的是不同站点之间，使用 ajax 无法相互调用的问题。**跨域问题本质是浏览器的一种保护机制，它的初衷是为了保证用户的安全，防止恶意网站窃取数据。** 但这个保护机制也带来了新的问题，它的问题是给不同站点之间的正常调用，也带来的阻碍，那怎么解决这个问题呢？接下来我们一起来看。 ## 1.跨域三种情况在请求时，如果出现了以下情况中的任意一种，那么它就是跨域请求： 1. **协议不同，如 http 和 https；** 2. **域名不同；** 3. **端口不同。** 也就是说，**即使域名相同，如果一个使用的是 http，另一个使用的是 https，那么它们也属于跨域访问**。常见的跨域问题如下图所示： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fcac2c52aba34069a488e457cc1cfcf6~tplv-k3u1fbpfcp-zoom-1.image) ## 2.跨域问题演示接下来，我们使用两个 Spring Boot 项目来演示跨域的问题，其中一个是端口号为 8080 的前端项目，另一个端口号为 9090 的后端接口项目。 ### 2.1 前端网站前端项目只需要在 resources 下放两个文件，一个用于发送 ajax 请求的 jquery.js，另一个是 html 前端页面，工程目录如下图所示： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20884af9ef1e497781ef401ec5aff846~tplv-k3u1fbpfcp-zoom-1.image) 其中前端页面 index.html 的代码如下： ```html 跨域测试页面

跨域测试

``` ### 2.2 后端接口后端接口项目首先先在 application.properties 配置文件中，设置项目的端口号为 9090，如下所示： ```properties server.port=9090 ``` 然后创建一个后端控制器，返回一个 JSON 格式的数据，实现代码如下： ```java import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; @RestController public class TestController { @RequestMapping("/test") public HashMap test() { return new HashMap() {{ put("state", 200); put("data", "success"); put("msg", ""); }}; } } ``` 以上两个项目创建并启动成功之后，使用前端项目访问后端接口，因为端口不一样，所以也属于跨域访问，运行结果如下图所示： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4411961e235743c280873a34a62464c6~tplv-k3u1fbpfcp-zoom-1.image) ## 3.解决跨域问题在 Spring Boot 中跨域问题有很多种解决方案，比如以下 5 个： 1. **使用 @CrossOrigin 注解实现跨域；** 2. **通过配置文件实现跨域；** 3. **通过 CorsFilter 对象实现跨域；** 4. **通过 Response 对象实现跨域；** 5. **通过实现 ResponseBodyAdvice 实现跨域。** 当然如果你愿意的话，还可以使用过滤器来实现跨域，但它的实现和第 5 种实现类似，所以本文就不赘述了。 ### 3.1 通过注解跨域 **使用 @CrossOrigin 注解可以轻松的实现跨域，此注解既可以修饰类，也可以修饰方法。当修饰类时，表示此类中的所有接口都可以跨域；当修饰方法时，表示此方法可以跨域**，它的实现如下： ```java import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; @RestController @CrossOrigin(origins = "*") public class TestController { @RequestMapping("/test") public HashMap test() { return new HashMap() {{ put("state", 200); put("data", "success"); put("msg", ""); }}; } } ``` 以上代码的执行结果如下图所示： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b26dfeb0ef14911a9ee5708fba5e902~tplv-k3u1fbpfcp-zoom-1.image) 从上图中可以看出，前端项目访问另一个后端项目成功了，也就说明它解决了跨域问题。 **优缺点分析** 此方式虽然虽然实现（跨域）比较简单，但细心的朋友也能发现，**使用此方式只能实现局部跨域，当一个项目中存在多个类的话，使用此方式就会比较麻烦（需要给所有类上都添加此注解）。** ### 3.2 通过配置文件跨域接下来我们**通过设置配置文件的方式就可以实现全局跨域**了，它的实现步骤如下： - 创建一个新配置文件； - 添加 @Configuration 注解，实现 WebMvcConfigurer 接口； - 重写 addCorsMappings 方法，设置允许跨域的代码。具体实现代码如下： ```java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration // 一定不要忽略此注解 public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 所有接口 .allowCredentials(true) // 是否发送 Cookie .allowedOriginPatterns("*") // 支持域 .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法 .allowedHeaders("*") .exposedHeaders("*"); } } ``` ### 3.3 **通过 CorsFilter 跨域** 此实现方式和上一种实现方式类似，**它也可以实现全局跨域**，它的具体实现代码如下： ```java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration // 一定不能忽略此注解 public class MyCorsFilter { @Bean public CorsFilter corsFilter() { // 1.创建 CORS 配置对象 CorsConfiguration config = new CorsConfiguration(); // 支持域 config.addAllowedOriginPattern("*"); // 是否发送 Cookie config.setAllowCredentials(true); // 支持请求方式 config.addAllowedMethod("*"); // 允许的原始请求头部信息 config.addAllowedHeader("*"); // 暴露的头部信息 config.addExposedHeader("*"); // 2.添加地址映射 UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource(); corsConfigurationSource.registerCorsConfiguration("/**", config); // 3.返回 CorsFilter 对象 return new CorsFilter(corsConfigurationSource); } } ``` ### 3.4 通过 Response 跨域 **此方式是解决跨域问题最原始的方式，但它可以支持任意的 Spring Boot 版本（早期的 Spring Boot 版本也是支持的）。但此方式也是局部跨域，它应用的范围最小，设置的是方法级别的跨域**，它的具体实现代码如下： ```java import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletResponse; import java.util.HashMap; @RestController public class TestController { @RequestMapping("/test") public HashMap test(HttpServletResponse response) { // 设置跨域 response.setHeader("Access-Control-Allow-Origin", "*"); return new HashMap() {{ put("state", 200); put("data", "success"); put("msg", ""); }}; } } ``` ### 3.5 通过 ResponseBodyAdvice 跨域通过重写 ResponseBodyAdvice 接口中的 beforeBodyWrite（返回之前重写）方法，我们可以对所有的接口进行跨域设置，它的具体实现代码如下： ```java import org.springframework.core.MethodParameter; import org.springframework.http.MediaType; import org.springframework.http.server.ServerHttpRequest; import org.springframework.http.server.ServerHttpResponse; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice; @ControllerAdvice public class ResponseAdvice implements ResponseBodyAdvice { /** * 内容是否需要重写（通过此方法可以选择性部分控制器和方法进行重写） * 返回 true 表示重写 */ @Override public boolean supports(MethodParameter returnType, Class converterType) { return true; } /** * 方法返回之前调用此方法 */ @Override public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType, Class selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) { // 设置跨域 response.getHeaders().set("Access-Control-Allow-Origin", "*"); return body; } } ``` **此实现方式也是全局跨域，它对整个项目中的所有接口有效。** ## 4.原理分析为什么通过以上方法设置之后，就可以实现不同项目之间的正常交互呢？这个问题的答案也很简单，我们之前在说跨域时讲到：“**跨域问题本质是浏览器的行为，它的初衷是为了保证用户的访问安全，防止恶意网站窃取数据**”，那想要解决跨域问题就变得很简单了，**只需要告诉浏览器这是一个安全的请求，“我是自己人”就行了**，那怎么告诉浏览器这是一个正常的请求呢？只需要**在返回头中设置“Access-Control-Allow-Origin”参数即可解决跨域问题，此参数就是用来表示允许跨域访问的原始域名的，当设置为“*”时，表示允许所有站点跨域访问**，如下图所示： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99ade848f38040379070c076ae67482d~tplv-k3u1fbpfcp-zoom-1.image) 所以**以上 5 种解决跨域问题的本质都是给响应头中加了一个 Access-Control-Allow-Origin 的响应头而已。** #### 演示项目源码 [https://gitee.com/mydb/springboot-examples/tree/master/spring-boot-cross](https://gitee.com/mydb/springboot-examples/tree/master/spring-boot-cross) ## 总结跨域问题的本质是浏览器为了保证用户的一种安全拦截机制，想要解决跨域问题，只需要告诉浏览器“我是自己人，不要拦我”就行。它的常见实现方式有 5 种：通过注解实现局部跨域、通过配置文件实现全局跨域、通过 CorsFilter 对象实现全局跨域、通过 Response 对象实现局部跨域，通过 ResponseBodyAdvice 实现全局跨域。 #### 参考 & 鸣谢 blog.csdn.net/pjmike233/article/details/82461911 > 是非审之于己，毁誉听之于人，得失安之于数。 > > 公众号：Java面试真题解析 > > 面试合集：[https://gitee.com/mydb/interview](https://gitee.com/mydb/interview)