工作中，如何解决跨域问题？

本是古典何须时尚 2023-09-24 20:30 52阅读 0赞

在实际项目中，前后端分成两个不同的项目，各自部署在不同的域名下，这也就会遇到跨域问题了。

既然问题发生了，那就要从根本上去解决问题，在开始说解决方案前，我们有必要了解一下什么是跨域。

### 什么是跨域？ ###

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

### 什么是同源策略？ ###

> 所谓同源指的是：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

同源策略它是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。

浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。

*  [http://www.a.com/index.html][http_www.a.com_index.html] 调用 [http://www.a.com/user.jsp][http_www.a.com_user.jsp] 协议、域名、端口号都相同，同源。

*  [https://www.a.com/index.html][https_www.a.com_index.html] 调用 [http://www.a.com/user.jsp][http_www.a.com_user.jsp] 协议不同，非同源。

*  [http://www.a.com:8080/index.html][http_www.a.com_8080_index.html] 调用 [http://www.a.com:8081/user.jsp][http_www.a.com_8081_user.jsp] 端口不同，非同源。

*  [http://www.a.com/index.html][http_www.a.com_index.html] 调用 [http://www.b.com/user.jsp][http_www.b.com_user.jsp] 域名不同，非同源。

*  [http://localhost:8080/index.html][http_localhost_8080_index.html] 调用 [http://127.0.0.1:8080/user.jsp][http_127.0.0.1_8080_user.jsp] 虽然localhost等同于 127.0.0.1 但是也是非同源的。

同源策略限制的情况：

1.  Cookie、LocalStorage 和 IndexDB 无法读取

1.  DOM 和 Js对象无法获得

1.  AJAX 请求不能发送

**注意：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。**

### 跨域流程 ###

![format_png][]

### 跨域访问示例 ###

假设有两个网站，A网站部署在：[http://localhost:8080][http_localhost_8080] 即本地ip端口8080上；B网站部署在：[http://localhost:8081][http_localhost_8081] 即本地ip端口8081上。

现在B网站的页面想去访问A网站的信息，页面显示如下：

![format_png 1][]

从错误信息可以看出以上出现了跨域问题！

### 如何解决跨域问题？ ###

#### 1、Filter过滤器 ####

使用Filter过滤器来过滤服务请求，向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。

@WebFilterpublicclassCorsFilterimplementsFilter {  
    
        @OverridepublicvoiddoFilter(ServletRequest req, ServletResponse res, FilterChain chain)throws IOException, ServletException {  
            HttpServletResponseresponse= (HttpServletResponse) res;  
            response.setHeader("Access-Control-Allow-Origin", "*");  
            response.setHeader("Access-Control-Allow-Methods", "*");  
            response.setHeader("Access-Control-Max-Age", "3600");  
            response.setHeader("Access-Control-Allow-Headers", "*");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            chain.doFilter(req, res);  
        }  
    }
    复制代码

#### 2、继承 HandlerInterceptorAdapter ####

@ComponentpublicclassCrossInterceptorextendsHandlerInterceptorAdapter {
    
        @OverridepublicbooleanpreHandle(HttpServletRequest request, HttpServletResponse response, Object handler)throws Exception {
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "*");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            returntrue;
        }
    }
    复制代码

#### 3、实现 WebMvcConfigurer ####

@Configuration@SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")publicclassAppConfigimplementsWebMvcConfigurer {
    
        @OverridepublicvoidaddCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")  // 拦截所有的请求
                    .allowedOrigins("http://www.abc.com")  // 可跨域的域名，可以为 *
                    .allowCredentials(true)
                    .allowedMethods("*")   // 允许跨域的方法，可以单独配置
                    .allowedHeaders("*");  // 允许跨域的请求头，可以单独配置
        }
    }
    复制代码

#### 4、使用Nginx配置 ####

location / {
    
       add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Headers X-Requested-With;
       add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    
       if ($request_method = 'OPTIONS') {
         return 204;
       }
    }
    复制代码

#### 5、使用 @CrossOrgin 注解 ####

如果只是想部分接口跨域，且不想使用配置来管理的话，可以使用这种方式

**在Controller使用**

@CrossOrigin@RestController@RequestMapping("/user")publicclassUserController {
    
    	@GetMapping("/{id}")
    	public User get(@PathVariable Long id) {
    		
    	}
    
    	@DeleteMapping("/{id}")
    	publicvoidremove(@PathVariable Long id) {
    
    	}
    }
    复制代码

**在具体接口上使用**

@RestController@RequestMapping("/user")publicclassUserController {
    
    	@CrossOrigin
    	@GetMapping("/{id}")
    	public User get(@PathVariable Long id) {
    		
    	}
    
    	@DeleteMapping("/{id}")
    	publicvoidremove(@PathVariable Long id) {
    
    	}
    }
    复制代码

### 总结 ###

#### 前端解决方案 ####

1.  使用 JSONP 方式实现跨域调用；

1.  使用 NodeJS 服务器做为服务代理，前端发起请求到 NodeJS 服务器， NodeJS 服务器代理转发请求到后端服务器；

#### 后端解决方案 ####

*  nginx 反向代理解决跨域

*  服务端设置Response Header(响应头部)的Access-Control-Allow-Origin；

*  在需要跨域访问的类和方法中设置允许跨域访问（如 Spring 中使用@CrossOrigin注解）；

*  继承使用Spring Web的 CorsFilter（适用于Spring MVC、Spring Boot）；

*  实现 WebMvcConfigurer 接口（适用于Spring Boot）；

作者：初念初恋

链接：[https://juejin.cn/post/7203925850399555640][https_juejin.cn_post_7203925850399555640]

[http_www.a.com_index.html]: http://www.a.com/index.html
[http_www.a.com_user.jsp]: http://www.a.com/user.jsp
[https_www.a.com_index.html]: https://www.a.com/index.html
[http_www.a.com_8080_index.html]: http://www.a.com:8080/index.html
[http_www.a.com_8081_user.jsp]: http://www.a.com:8081/user.jsp
[http_www.b.com_user.jsp]: http://www.b.com/user.jsp
[http_localhost_8080_index.html]: http://localhost:8080/index.html
[http_127.0.0.1_8080_user.jsp]: http://127.0.0.1:8080/user.jsp
[format_png]: https://img-blog.csdnimg.cn/img_convert/e3eaac7f7712264b93be73f3e1f30ee6.webp?x-oss-process=image/format,png
[http_localhost_8080]: http://localhost:8080
[http_localhost_8081]: http://localhost:8081
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/63fcb54d7ce2db71669fdc6b9f7d72ac.webp?x-oss-process=image/format,png
[https_juejin.cn_post_7203925850399555640]: https://juejin.cn/post/7203925850399555640