记录cors跨域错误

刘祖明

由于公司使用的是spring boot + spring cloud 将开发全部微服务化了,在微服务的过程中将前后端完全分离了。我们公司前端使用一个域名、后端api使用一个域名,这样前后端之间就产生了跨域问题。

常见跨域问题

我们最常见的跨域问题就是浏览器提示在A域名下不可以访问B域名的api,这样的错误很好解决,我们的解决方式是基于springboot框架的。

这样的问题我们只需要在后端加入cors配置,就可以解决这类跨域问题,我们在springmvc的java配置中加入以下代码即可

    @Bean
    @ConditionalOnProperty(name = jhipster.cors.allowed-origins")
    public CorsFilter corsFilter() {
        log.debug("Registering CORS filter");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = jhipsterProperties.getCors();
        source.registerCorsConfiguration("/api/**", config);
        source.registerCorsConfiguration("/v2/api-docs", config);
        source.registerCorsConfiguration("/oauth/**", config);
        source.registerCorsConfiguration("/*/api/**", config);
        source.registerCorsConfiguration("/*/oauth/**", config);
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }

多值跨域问题

错误信息:

The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:7080,http://localhost:7080', but only one is allowed. Origin 'http://localhost:7080' is therefore not allowed access.

错误信息很好理解,就是说Access-Control-Allow-Origin有两个值,但是浏览器只准许有一个值,所以报错。

我们查看浏览器中的网络请求:
图片描述

我们发现在 response headersAccess-Control-Allow-Origin 出现了两次。由于是在 response 中这说明我们是在后端出现的问题。

由于我们的后端属于标准的微服务架构,也就是:
front -> api gateway -> other Micro service
由于我已经在 api gateway 项目中已经加入了 cors,那么在 api 网关(gateway)后面的微服务不在需要加入 cors 了。由于小伙伴在后端的微服务项目中也同样加入了cors,这样在返回的response中就加入了两个相同的跨域header,这样浏览器发现多个Access-Control-Allow-Origin于是就报错了。

找到原因错误就很好解决了,我们只需要在小伙伴的后端将cors跨域配置删除即可,只保留API gateway 项目的cors配置。

阅读 15.6k

我的java进阶之旅
记录我的进阶之旅
82 声望
6 粉丝
0 条评论
你知道吗?

82 声望
6 粉丝
宣传栏