多层跨域引出的血案

一直在小程序环境下开发,跨域问题一直不明显。

忽一日,需要做一个简单的web,访问小程序服务端一个简单的接口。
需求很简单,实现很容易,噼里啪啦敲好上测试服务器——糟糕,访问不了!

前端一看,明显是跨域问题嘛,那就加了一个请求头:

$.ajax({
				type: 'GET',
				headers: {
					"Access-Control-Allow-Origin":"http://example.edu",
					"Access-Control-Allow-Headers":"X-Requested-With",
					'Access-Control-Allow-Origin': '*'
				},
				url: 'xxx.xxx.com'
				dataType: 'json',
				success: function(res){
					console.log(res);
				}
			});

再访问,还不行,于是又加上了同源策略:

<meta name="referrer" content="always">

结果访问直接报:unsafe-url

于是呼叫服务端,服务端一看,跨域问题,那就配置服务端允许跨域,直接在中转服务中加上CorsConfig:

@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedMethod("*");
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }
}

再试,还是不行!

那就再加,在业务实现服务中也加上CorsConfig

再试,还是不行!

那就在网关中再加!

最终,响应头已经成这样了:
在这里插入图片描述

这时,服务端人员才醒悟过来,这特么不是跨域不够,是跨域过多,多次跨域导致业务根本无法响应出来!

于是全业务代码搜索跨域代码,先去掉业务实现服务上的跨域,再去掉中转服务上的跨域,再去掉网关配置中的跨域,再试!

结果还是不行:
在这里插入图片描述

从这个响应头上看,应该还有一个地方设置跨域重复了。
而目前整个业务代码里面只保留了一个全局的CorsFilter和若干个@CrossOrigin,而我们要访问到的业务上可以确定没有@CrossOrigin注解的!

这就奇怪了!

这个时候后端人员才悠悠的想起:年初的某一天,网关上面加了一个CorsConfig,当时在测试上没有测试通过,于是代码就没有提交,而测试服上运行的网关服务可能CorsConfig还没有删!

众人醒悟,赶紧重新打包网关服务替换上去!

再一试,还是不行!

再编辑前端页面,把referrer的meta和请求头中的header全部去掉,终于可以了!

综上,就是这次多层跨域问题引出来的问题解决过程。
代码中还存在着很多的@CrossOrigin注解的跨域设置,翻看其DefaultCorsProcessor.processRequest的实现,大致如下:

public boolean processRequest(@Nullable CorsConfiguration config, HttpServletRequest request, HttpServletResponse response) throws IOException {
        Collection<String> varyHeaders = response.getHeaders("Vary");
        if (!varyHeaders.contains("Origin")) {
            response.addHeader("Vary", "Origin");
        }
        if (!varyHeaders.contains("Access-Control-Request-Method")) {
            response.addHeader("Vary", "Access-Control-Request-Method");
        }
        if (!varyHeaders.contains("Access-Control-Request-Headers")) {
            response.addHeader("Vary", "Access-Control-Request-Headers");
        }
        if (!CorsUtils.isCorsRequest(request)) {
            return true;
        } else if (response.getHeader("Access-Control-Allow-Origin") != null) {
            logger.trace("Skip: response already contains \"Access-Control-Allow-Origin\"");
            return true;
        } else {
            boolean preFlightRequest = CorsUtils.isPreFlightRequest(request);
            if (config == null) {
                if (preFlightRequest) {
                    this.rejectRequest(new ServletServerHttpResponse(response));
                    return false;
                } else {
                    return true;
                }
            } else {
                return this.handleInternal(new ServletServerHttpRequest(request), new ServletServerHttpResponse(response), config, preFlightRequest);
            }
        }
    }

可见其源码中对请求头是否设置了Origin、Access-Control-Request-Method、Access-Control-Request-Headers有过判断,没有设置才会设置响应头信息,所以一般多层使用@CrossOrigin注解不会出问题。

但应用中已经存在全局的自定义跨域配置了,就统一使用全局自定义配置吧,不要再自行配置@CrossOrigin了,以免哪一天又出现莫名的问题!

在nginx中配置多层跨域的方法如下: 1. 首先,在nginx的配置文件中找到你的vue项目所在的location块。这个块通常会包含类似以下的配置: ``` location / { # 配置vue项目的根目录 root /path/to/your/vue/project; try_files $uri $uri/ /index.html; } ``` 2. 在这个location块内部,添加以下配置来实现跨域: ``` location /api/ { # 配置api请求的代理地址 proxy_pass http://api.example.com/; } location /backend/ { # 配置后端请求的代理地址 proxy_pass http://backend.example.com/; } ``` 其中,`/api/`对应你的接口请求路径,`http://api.example.com/`是你的实际接口地址。同样地,`/backend/`是你后端请求的路径,`http://backend.example.com/`是你的后端实际地址。 3. 保存配置文件并重新加载nginx。 这样配置之后,当你的vue项目发起`/api/`开头的请求时,nginx会将请求代理到`http://api.example.com/`,实现跨域请求。同理,`/backend/`开头的请求也会被代理到后端服务器。 请注意,以上是一个简单的示例,你需要根据你的实际情况修改配置。另外,为了确保安全性,你可能还需要配置一些额外的安全措施,比如重写HTTP头信息或启用CORS。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [nginx 上部署vue,同时转发多台服务器,实现负载均衡](https://blog.csdn.net/hyp187/article/details/107512590)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vue中跨域及打包部署到nginx跨域设置方法](https://download.csdn.net/download/weixin_38557896/12937934)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值