前后端分离的跨域问题

骑猪看日落 2022-10-31 00:40 8阅读 0赞

### 跨域问题原因 ###

在现在流行的前后端分离开发中，**跨域问题**突显了出来，**跨域问题**的根本原因：**浏览器有同源策略限制，当前域名的js只能读取同域下的窗口属性**，这是一个基础安全功能。那么什么是**同源策略**呢？即两资源的URL中 **协议**，**域名**，**端口**，都相同则称为同源，若两资源为不同源，则不允许共享资源。  
例如：以http://www.baidu.com/dir1/a.html为例子

<table> 
 <thead> 
  <tr> 
   <th>请求地址</th> 
   <th>结果</th> 
   <th>原因</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>http://www.baidu.com/dir1/b.html</td> 
   <td>成功</td> 
   <td>同一域名端口，相同文件夹</td> 
  </tr> 
  <tr> 
   <td>http://www.baidu.com/dir2/a.html</td> 
   <td>成功</td> 
   <td>同一域名端口，不同文件夹</td> 
  </tr> 
  <tr> 
   <td>https://www.baidu.com/dir1/b.html</td> 
   <td>失败</td> 
   <td>不同协议，http与https</td> 
  </tr> 
  <tr> 
   <td>http://www.baidu.com:8000/dir1/b.html</td> 
   <td>失败</td> 
   <td>不同端口，默认为80</td> 
  </tr> 
  <tr> 
   <td>http://www.sina.com/dir1/b.html</td> 
   <td>失败</td> 
   <td>不同域名</td> 
  </tr> 
 </tbody> 
</table>

**注： 核心判断方式为，端口及端口左边的地址要完全一致**

#### CORS ####

**CORS**是**Cross-Origin Resource Sharing**的缩写。也就是**支持跨域资源共享**，即不同域之间可以进行资源的相互访问。那么为什么要有CORS呢，其实很简单，浏览器的同源政策保证了安全的同时，也让我们不能访问其它域的资源，即使开发者认为的安全操作也不行，这时，我们就可以用一套**协议**来告诉浏览器，这某几个域在我们的服务范围之内，不要一棍打死。即有如下改变：  
**CORS出现之前：**  
  浏览器接收到服务器回复 --> 检查是否同源 --> 不同源就拒绝响应！/同源就响应！  
**CORS出现之后：**  
  浏览器接收到服务器回复 --> 检查一下response header --> 发现有特定字段Access-Control-Allow-Origin --> 检查这个header后面的值包不包含自己所在的域（打比方我们现在在www.baidu.com），浏览器检查发现后response header里面写的有Access-Control-Allow-Origin: https://www.baidu.com, https://www.google.com, 正好我们在允许的域里面！ --> 浏览器响应服务器返回的数据(response)。

#### CORS 实现逻辑 ####

CORS需要浏览器和服务器也就是B/S两端分别实现！

##### 浏览器要实现的内容： #####

接收到服务器的回复之后**检测回复头里面是否含有特定字段**！有的话**查看自己的域名是否在内**，一定要这两个条件都符合！浏览器才会接受（或者说响应）服务器返回的回复！

##### 服务器需要实现的内容： #####

服务器需要在接受到浏览器发来的请求（request）后，在返回response之前！设置header，在header中里面包含特定字段，以便浏览器收到回复之后可以去检查，有字段证明服务器同意服务这个网站，浏览器就可以接受回复，没有字段或者字段的值不包含发送请求的网站，浏览器就不会响应回复内容！

##### 注意： #####

如果是**复杂的跨域**请求，浏览器则会先发送一个OPSTIONS探路，收到响应允许跨域后会再发送真实请求。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTM2NDM5_size_16_color_FFFFFF_t_70]  
注：此时服务端写代码时，还需响应（OPTIONS）允许跨域。

### 跨域问题的解决方案 ###

*  修改浏览器的设置 （不推荐，不安全）
 *  修改请求的方式：jsonp （不推荐，诸多限制）
 *  用 Nignx 统一访问域
 *  CORS 前端后端代码实现

### CORS后端代码实现 ###

Nignx和前端的解决方案自行查找下吧，这里介绍下后端的常见解决方案

###### 第一种方法： ######

在controller上加上@CrossOrigin 注解或者@CrossOrigin(origins = “http://localhost:8081”)，优点是粒度更细，某URL是否跨域可以分开配置，缺点是，如果整个项目都要跨域，则每个controller都需要添加注解

@RestController
    @RequestMapping(path = "/user")
    @CrossOrigin  // 解决跨域问题
    public class UserController {
    		//......
    }

###### 第二种方法： ######

创建配置类CorsConfig，此方法统一配置，用的较多

@Configuration
    public class CorsConfig implements WebMvcConfigurer {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                    .allowCredentials(true)
                    .maxAge(3600)
                    .allowedHeaders("*");
        }
    }

###### 第三种方法： ######

创建一个过滤器CorsFilter

@WebFilter(filterName = "CorsFilter ")
    @Configuration
    public class CorsFilter implements Filter {
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            
            HttpServletResponse response = (HttpServletResponse) res;
            response.setHeader("Access-Control-Allow-Origin","*");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            
            HttpServletRequest httpRequest = (HttpServletRequest) req;
    		// OPTIONS method response
    		if (httpRequest.getMethod().equals("OPTIONS"))
    			((HttpServletResponse) res).sendError(HttpServletResponse.SC_OK);
            
            chain.doFilter(req, res);
        }
    }

###### 第四种方法： ######

网关配置跨域（用于微服务）

@Configuration
    public class CorsConfiguration {
    
        @Bean
        public CorsWebFilter corsWebFilter(){
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    
            CorsConfiguration corsConfiguration = new CorsConfiguration();
    
            //1、配置跨域
            corsConfiguration.addAllowedHeader("*");
            corsConfiguration.addAllowedMethod("*");
            corsConfiguration.addAllowedOrigin("*");
            // 是否允许携带cookie跨域
            corsConfiguration.setAllowCredentials(true);
    
            source.registerCorsConfiguration("/**",corsConfiguration);
            return new CorsWebFilter(source);
        }
    }

### 扩展阅读 ###

[**https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access\_control\_CORS**][https_developer.mozilla.org_zh-CN_docs_Web_HTTP_Access_control_CORS]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTM2NDM5_size_16_color_FFFFFF_t_70]: /images/20221024/6bca447beca44aefbba5491cdda8b084.png
[https_developer.mozilla.org_zh-CN_docs_Web_HTTP_Access_control_CORS]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS