谷粒商城学习日记（25）——网关配置同一跨域

跨域介绍

解决XHR的跨域请求（推荐使用）
解决XHR的跨域 的原理？
浏览器对XHR跨域拦截是先请求还是先判断？

1.简单请求 【先请求，后判断】

方法为：
GET
HEAD
POST
请求header里面
无自定义头
Content-Type为以下几种：
text/plain
multipart/form-data
application/x-www-form-urlencoded

非简单请求 【先判断后请求】
工作中常见的有：

put、delete 方法的ajax请求
发送json格式的ajax请求
带自定义头的ajax请求
非简单请求 会现发送一个 options 的请求，主要是确定服务端是否支持跨域，如果支持，则发送真正请求，如果不支持，将不会发送真正请求。

如何判断？
浏览器查看返回的response中是否有 Origin 标示，如果没有则表示不支持跨域，有则是 W3C 的CORS规范实现跨域。

解决方案

解决方案一般有两种

通过NGINX反向代理到同一域名同一端口

这种方式在环境上做限制，一般在部署中使用

在代码中加跨域响应

这种方式通过代码的filter集中在接口调用后在响应头中加入
跨域代码

代码解决

24节中，配置同一路由访问之后，登录时由于传输json数据的接口方式跨域了

由localhost:8081–>localhost:8070/api/**

由于我们后面都是通过gateway服务访问代理就可以，所以我们再gateway模块中

添加src/com.gulimall.xfwang/filter/RespFilter.java

@Configuration
public class RespFilter{
    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);

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

由于renren-fast模块中也配置了跨域filter
我们需要注释掉，不然响应头会错误、

注释 src/main/java/io/renren/config/CorsConfig.java 中的配置内容

配置完成，重启gateway，renren-fast,vue。

完成跨域配置