跨域配置

简介: 跨域配置

问题现象


image.png

h5和web分别处于不同的域名
因web nginx并未配置允许h5域名访问的白名单
所以h5访问web的资源就出现了跨域问题


跨域原理简介


image.png

跨域问题来源于浏览器的同源策略
浏览器为了提高网站的安全性
在发送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
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
2月前
“跨域”问题理解
“跨域”问题理解
14 0
|
9天前
|
安全
什么是跨域?
什么是跨域?
|
2月前
|
Web App开发 JavaScript 开发者
|
3月前
|
JSON 缓存 前端开发
什么是跨域
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
|
3月前
|
安全
什么是跨域,为什么会跨域?
什么是跨域,为什么会跨域?
76 1
|
4月前
|
Web App开发 前端开发 JavaScript
你能讲一下跨域吗
你能讲一下跨域吗
|
4月前
|
JSON 前端开发 安全
你了解跨域吗
你了解跨域吗
33 0
|
8月前
|
安全 JavaScript 前端开发
配置CORS跨域
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
310 0
|
8月前
|
前端开发
网关的cors跨域配置
网关的cors跨域配置
101 0
|
9月前
CorsConfig 跨域 初认识
CorsConfig 跨域 初认识
123 0