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