【项目杂记】跨域介绍及配置方式

「爱情、让人受尽委屈。」 2022-10-29 15:24 11阅读 0赞

跨域是对于 ajax 的限制，在浏览器上当前访问的网站向另一个网站发送请求获取数据的过程就是**跨域请求**，只有允许的域（Orgin）才可以调用服务端代码，

跨域是浏览器的**同源策略**决定的，是一个重要的浏览器安全策略，用于限制一个 origin 的文档或者它加载的脚本与另一个源的资源进行交互，它能够帮助阻隔恶意文档，减少可能被攻击的媒介，可以使用 CORS 配置解除这个限制。

关于跨域网上已经有很多解释，这里就不啰嗦，也可以直接看 MDN 的“浏览器的同源策略”文档进一步了解，这里就列举几个同源和不同源的例子，相信大家都能看得懂：

# 同源的例子
    http://test.com/app1/index.html  # 只是路径不同
    http://test.com/app2/index.html
    
    http://test.com:80  # 只是大小写差异
    http://test.com
    
    # 不同源的例子
    http://test.com/app1   # 协议不同
    https://test.com/app2
    
    http://test.com        # host 不同
    http://www.test.com
    http://myapp.test.com
    
    http://test.com        # 端口不同
    http://test.com:8080

### 1.跨域处理方式 ###

这里再来说一下简单请求和非简单请求：

**1）简单请求**

特征（必须满足以下两个条件）

*  请求方法是 `HEAD`、`GET`、`POST` 三种之一；
 *  HTTP 头信息不超过右边着几个字段：`Accept`、`Accept-Language`、`Content-Language`、`Last-Event-IDContent-Type` 只限于三个值 `application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`；

处理方式：

*  浏览器会在头信息中增加 `Origin` 字段后直接发出，`Origin` 字段用来说明，本次请求来自的哪个源（协议+域名+端口）。
 *  如果服务器发现 `Origin` 指定的源不在许可范围内，服务器会返回一个正常的 HTTP 回应，浏览器取到回应之后发现回应的头信息中没有包含 `Access-Control-Allow-Origin` 字段，就抛出一个错误给 XHR 的 `error` 事件；
 *  如果服务器发现 `Origin` 指定的域名在许可范围内，服务器返回的响应会多出几个 `Access-Control-` 开头的头信息字段。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkyNw_size_16_color_FFFFFF_t_70_pic_center]

**2）非简单请求**

特征：非简单请求是那种对服务器有特殊要求的请求，

*  比如请求方法是 `PUT` 或 `DELETE`
 *  或 `Content-Type` 值为 `application/json`

处理方式：

*  浏览器会在正式通信之前，发送一次 HTTP 预检`OPTIONS` 请求，先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些 HTTP 请求方法和头信息字段。
 *  只有得到肯定答复，浏览器才会发出正式的 `XHR`请求，否则报错。

### 2.基本配置 ###

配置一个基本的跨域很简答，像下面这样

@Configuration
    public class XusmCorsConfig {
        
    
        @Bean
        public CorsFilter corsFilter() {
        
            
            // 1.添加CORS配置信息
            CorsConfiguration config = new CorsConfiguration();
            // 允许所有的域
            config.addAllowedOrigin(*);
            // 允许的请求方式
            config.addAllowedMethod("OPTIONS");
            config.addAllowedMethod("HEAD");
            config.addAllowedMethod("GET");
            config.addAllowedMethod("PUT");
            config.addAllowedMethod("POST");
            config.addAllowedMethod("DELETE");
            config.addAllowedMethod("PATCH");
            // 允许的头信息
            config.addAllowedHeader("*");
    
            // 2.添加映射路径，我们拦截一切请求
            UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
            configSource.registerCorsConfiguration("/**", config);
    
            // 3.返回新的CorsFilter.
            return new CorsFilter(configSource);
        }
    }

但是像上面这样，允许所有的域，问题也很明显

1.  存在安全隐患，比如有人恶意调用我们的接口，删除数据或插入数据。所以，在开发环境下，我们可以使用 \*，但是在生产环境一定要指定允许的域。
2.  在允许所有域的情况下，请求头中不能携带 cookie 信息

### 3.进阶配置 ###

1）将允许的域配置到 application.yml 中

> 注：这里一定要严格按照请求头的 Orgin 来配，切记 http:// 不要忘。

origin:
      - http://bbs.xysmxh.com
      - http://www.bbs.xysmxh.com
      - http://localhost:8080

2）读取配置文件的内容

@ConfigurationProperties(prefix = "xusm")
    public class CorsProperties {
        
    	// yml 中配置的是一个数组，所以这里采用 List
        private List<String> origin = new ArrayList<>();
    
        public List<String> getOrigin() {
        
            return origin;
        }
    
        public void setOrigin(List<String> origin) {
        
            this.origin = origin;
        }
    }

3）跨域配置

@Configuration
    @EnableConfigurationProperties(CorsProperties.class)
    public class XusmCorsConfig {
        
    
        @Resource
        private CorsProperties corsProperties; // 获取配置的允许的域
    
        @Bean
        public CorsFilter corsFilter() {
        
            // 1.添加CORS配置信息
            CorsConfiguration config = new CorsConfiguration();
    
            // 读取配置文件中允许的域
            List<String> origin = corsProperties.getOrigin();
            origin.forEach(o->config.addAllowedOrigin(o));
            // 允许携带 cookie 信息
            // 注：允许的域,不要写*，否则cookie就无法使用了
            config.setAllowCredentials(true);
            // 允许的请求方式
            config.addAllowedMethod("OPTIONS");
            config.addAllowedMethod("HEAD");
            config.addAllowedMethod("GET");
            config.addAllowedMethod("PUT");
            config.addAllowedMethod("POST");
            config.addAllowedMethod("DELETE");
            config.addAllowedMethod("PATCH");
            // 允许的头信息
            config.addAllowedHeader("*");
    
            // 2.添加映射路径，我们拦截一切请求
            UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
            configSource.registerCorsConfiguration("/**", config);
    
            // 3.返回新的CorsFilter.
            return new CorsFilter(configSource);
        }
    }

> 注：跨域还可以配置在 Nginx，感兴趣的同学请自行查阅

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzNTkyNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/136d00587b6b465eb718def2f3f8372b.png