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

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

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

什么是跨域？

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

什么是同源策略？

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

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

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

• http://www.a.com/index.html 调用 http://www.a.com/user.jsp 协议、域名、端口号都相同，同源。

• https://www.a.com/index.html 调用 http://www.a.com/user.jsp 协议不同，非同源。

• http://www.a.com:8080/index.html 调用 http://www.a.com:8081/user.jsp 端口不同，非同源。

• http://www.a.com/index.html 调用 http://www.b.com/user.jsp 域名不同，非同源。

• http://localhost:8080/index.html 调用 http://127.0.0.1:8080/user.jsp 虽然localhost等同于 127.0.0.1 但是也是非同源的。

同源策略限制的情况：

1. Cookie、LocalStorage 和 IndexDB 无法读取

2. DOM 和 Js对象无法获得

3. AJAX 请求不能发送

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

跨域流程

跨域访问示例

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

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

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

如何解决跨域问题？

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 方式实现跨域调用；

2. 使用 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