跨域的那些事 - 使用场景分析（一）

一、前言

如果你对跨域是什么都不了解，建议先去查看一下其他资料，简单了解一下

参考：https://juejin.cn/post/6844904055148380173、

​ https://juejin.cn/post/6844903678965448718、

​ https://www.ruanyifeng.com/blog/2016/04/cors.html

个人理解：

1、什么情况下才算跨域？

​ 三要素：协议、主机、端口。只要三个不完全相等，就算是跨域访问

2、为什么会有跨域问题

​ 这个主要就是浏览器厂商基于信息安全的考虑，对于不同服务之间的访问（A 访问不同源的 B服务器端），这个时候浏览器会做一些限制，需要B服务端给出指定的授权范围，浏览器根据服务器响应决定是否允许访问顺利的达成

3、那么怎么解决跨域带来的问题？

​ 这个就是我们开发过程中，需要考虑的问题，业界提供了很多方案。我们今天就挑选其中之一的方案来进行给大家拨开跨域的面纱

二、Spring Web 对 CORS 跨域资源共享

项目准备

1、服务端接口很简单

@RestController
@Slf4j
public class HealthCheckController {
    /**
     * slb 网关http 检查心跳 url
     */
    private static final String HEALTH_CHECK = "/health/check";

    /**
     * slb 网关心跳 检查
     * @return
     */
    @ResponseBody
    @RequestMapping(value = {HEALTH_CHECK}, method = RequestMethod.GET)
    public ALResponse healthCheck(){
        return ALResponse.SUCCESS;
    }
}

2、跨域配置我采用的添加 CorsWebFilter 过滤器方式进行全局跨域拦截

A：未设置任何访问权限许可

@Configuration
public class WebFluxConfiguration implements WebFluxConfigurer {


    /**
     * 跨域访问
     * @return
     */
    @Bean
    @Order(0)                                                               // 设置 order 排序。这个顺序很重要哦，为避免麻烦请设置在最前
    public CorsWebFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);                                   // 创建 CorsFilter 过滤器
    }
}

B：允许所有的访问许可

@Configuration
public class WebFluxConfiguration implements WebFluxConfigurer {


    /**
     * 跨域访问
     * @return
     */
    @Bean
    @Order(0)                                                               // 设置 order 排序。这个顺序很重要哦，为避免麻烦请设置在最前
    public CorsWebFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Collections.singletonList("*"));           // 允许所有请求来源
        config.setAllowCredentials(true);                                   // 允许发送 Cookie
        config.addAllowedMethod("*");                                       // 允许所有请求 Method
        config.setAllowedHeaders(Collections.singletonList("*"));           // 允许所有请求 Header
        // config.setExposedHeaders(Collections.singletonList("*"));        // 允许所有响应 Header
        config.setMaxAge(1800L);                                            // 有效期 1800 秒
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);                                   // 创建 CorsFilter 过滤器
    }
}

C：不添加任何跨域处理

模拟请求工具：postman，由于浏览器进行访问都会添加 Origin header信息，服务端也是需要去判断这个属性，所以通过postman模拟浏览器的时候，我们就主动设置这个字段

场景一：如果不加任何跨域处理【C 配置】、同源

场景二：如果不加任何跨域处理【C 配置】、跨域（不同源）

场景三：如果加上配置，同源访问【B 配置】

场景四：如果加上配置，跨域（不同源）【B 配置】

场景五：如果加上配置，同源访问【A 配置】

场景六：如果加上配置，跨域（不同源）【A 配置】

三、总结

A场景：后端服务配置了跨域拦截，但是没有分配任何权限许可（会拦截所有跨域请求，不允许访问）

B场景：后端服务配置了跨域拦截，但是许可完全放开，允许任何跨域请求访问

C场景：后端服务不做跨域处理，不管是否跨域，都允许访问

后端服务器对跨域请求的处理，主要是通过 CorsWebFilter 拦截器进行的。通过跨域请求，给请求设置项目中预制的访问权限，然后进行响应头部的设置。进而通知浏览器，请求数据是否要响应给调用端（client端）

浏览器请求时申请访问权限，需要设置的header信息

Origin

Access-Control-Request-Headers

Access-Control-Request-Method

服务端响应告知客户端，自身的权限许可范围，设置的header信息

Access-Control-Allow-Credentials
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Origin