7、跨域问题分析及解决方案

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

2、同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

3、跨域流程

4、解决跨域问题
配置当次请求允许跨域
1、添加响应头
• Access-Control-Allow-Origin：支持哪些来源的请求跨域
• Access-Control-Allow-Methods：支持哪些方法跨域
• Access-Control-Allow-Credentials：跨域请求默认不包含cookie，设置为true可以包含cookie
• Access-Control-Expose-Headers：跨域请求暴露的字段
• CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：

Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如
果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

• Access-Control-Max-Age：表明该响应的有效时间为多少秒。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

5、在该项目的网关服务中配置跨域相关属性

@Configuration
public class GuliMallCorsConfigurion {

    @Bean
    public CorsWebFilter corsWebFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 1。配置跨域
        corsConfiguration.addAllowedHeader("*");
        // 允许支持哪些方法跨域
        corsConfiguration.addAllowedMethod("*");
        // 支持哪些来源的请求跨域
        corsConfiguration.addAllowedOrigin("*");
        // 设置为true可以包含cookie
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}

请求流程：
1、前端在请求后端时，首先会发送一个预检请求options；
2、请求到达gateway网关的过滤器Filter中，会返回跨域的相关参数给前端；
3、前端获得这些跨域参数后，再发送正式的请求到后端；