跨域问题学习笔记

一.为什么会出现跨域问题？

因为浏览器有一个安全机制叫同源策略。同源就是指协议、域名、端口都一样，如果任意一项不一致就是不同源。简单点说就是，你的网页URL和你调用的接口URL不是一个地方的，浏览器觉得有安全风险，不想让你使用这个接口的数据。

二.举例说明跨域的几种情况

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
如果你当前的页面URL是 http://www.yaoqi.com/index.html，那么接口地址如下几种情况

1. https://www.yaoqi.com/xxx （不同源，因为协议不同）

2. http://www.yaoqi.com:8080/xxx （不同源，因为端口不同）

3. http://www.notyaoqi.com/xxx （不同源，因为域名不同）

4. http://aaa.yaoqi.com/xxx （不同源，因为域名不同）

5. http://www.yaoqi.com/xxx （同源，协议、域名、端口均相同）

三.简单解决方法

在网关中定义“CorsConfiguration”类，该类用来做过滤，配置允许的请求跨域

@Configuration 
public class CorsConfiguration {
    @Bean // 添加过滤器
    public CorsWebFilter corsWebFilter(){
        // 基于url跨域，选择reactive包下的
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        // 跨域配置信息
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 允许跨域的头
        corsConfiguration.addAllowedHeader("*");
        // 允许跨域的请求方式
        corsConfiguration.addAllowedMethod("*");
        // 允许跨域的请求来源
        corsConfiguration.addAllowedOrigin("*");
        // 是否允许携带cookie跨域
        corsConfiguration.setAllowCredentials(true);

       // 任意url都要进行跨域配置
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}