其他分享
首页 > 其他分享> > 谷粒商城学习日记(25)——网关配置同一跨域

谷粒商城学习日记(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。

完成跨域配置

标签:25,网关,跨域,corsConfiguration,代码,配置,同一,请求
来源: https://blog.csdn.net/menxinziwen/article/details/115219928