问题现象
h5和web分别处于不同的域名 因web nginx并未配置允许h5域名访问的白名单 所以h5访问web的资源就出现了跨域问题
跨域原理简介
跨域问题来源于浏览器的同源策略 浏览器为了提高网站的安全性 在发送ajax请求时 只有在当前页面地址与请求地址的协议+域名+端口号相同时才允许访问 否则会被拦截
处理方式
- nginx反向代理
- cors(跨域资源共享)
nginx反向代理--对应上图中的nginx跨域配置
nginx配置iframe同源访问
# 只允许iframe过来的请求和当前nginx web服务是同一个域名 add_header X-Frame-Options SAMEORIGIN;
nginx 允许指定域名列表访问
## 和server同级别 map $http_origin $cors_list{ default http://xxx-te.test.xxxfintech.com; "~^http://xxx-te.test.xxxfintech.com" http://xxx-te.test.xxxfintech.com; "~^http://xxx-h5te.test.xxxfintech.com" http://xxx-h5te.test.xxxfintech.com; } ## server内 add_header 'Access-Control-Allow-Origin' '$cors_list';
cors(跨域资源共享)--对应上图中的网关跨域配置
在spring-cloud-gateway中添加跨域配置类
@Configuration public class CorsAutoConfiguration { @Autowired private GlobalCorsProperties globalCorsProperties; @Bean public CorsWebFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser()); globalCorsProperties.getCorsConfigurations().forEach((path,corsConfiguration)->source.registerCorsConfiguration(path, corsConfiguration)); return new CorsWebFilter(source); } }
在nacos中配置
spring: cloud: gateway: globalcors: cors-configurations: '[/**]': allow-credentials: true allowed-origins: # 允许访问的域名配置 - "http://xxxx" - "https://xxxx" allowed-headers: "*" allowed-methods: "*" max-age: 3600