前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >跨域解决方案

跨域解决方案

作者头像
玖柒的小窝
修改2021-12-24 11:38:20
4240
修改2021-12-24 11:38:20
举报
文章被收录于专栏:各类技术文章~各类技术文章~
跨域解决方案
跨域解决方案

问题现象

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

跨域原理简介

代码语言:javascript
复制
跨域问题来源于浏览器的同源策略
浏览器为了提高网站的安全性
在发送ajax请求时
只有在当前页面地址与请求地址的协议+域名+端口号相同时才允许访问
否则会被拦截
复制代码

处理方式

  • nginx反向代理
  • cors(跨域资源共享)

nginx反向代理--对应上图中的nginx跨域配置

nginx配置iframe同源访问

代码语言:javascript
复制
# 只允许iframe过来的请求和当前nginx web服务是同一个域名
add_header X-Frame-Options    SAMEORIGIN;
复制代码

nginx 允许指定域名列表访问

代码语言:javascript
复制
## 和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中添加跨域配置类

代码语言:javascript
复制
@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中配置

代码语言:javascript
复制
spring:
 cloud: 
  gateway:
    globalcors:
   cors-configurations:
     '[/**]': 
    allow-credentials: true
    allowed-origins: # 允许访问的域名配置
    - "http://xxxx"
    - "https://xxxx"
    allowed-headers: "*"
    allowed-methods: "*"
    max-age: 3600

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题现象
  • 跨域原理简介
  • 处理方式
    • nginx反向代理--对应上图中的nginx跨域配置
      • cors(跨域资源共享)--对应上图中的网关跨域配置
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档