记录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配置。


我的java进阶之旅
记录我的进阶之旅
82 声望
6 粉丝
0 条评论
推荐阅读
API编写规范
为什么设计api详情规范 主要是为了保证公司的小伙伴写出的api尽量少出bug,加快研发速度。 api 设计规范 绝大部分api都请务必加入用户id限定,主要为了防止某个用户可以请求所有的数据库数据; 管理员api,必须加...

刘祖明1阅读 3.9k

Spring Aop 动态代理
为了保持行为的一致性,代理类和委托类通常会实现相同的接口,所以在访问者看来两者没有丝毫的区别。通过代理类这中间一层,能有效控制对委托类对象的直接访问,也可以很好地隐藏和保护委托类对象,同时也为实施...

KerryWu5阅读 8.7k评论 1

SpringBoot集成LibreOffice+jodconverter做文件预览(office转pdf)
LibreOffice 是一款开放源代码的自由免费全能办公软件,可运行于 Microsoft Windows, GNU/Linux 以及 macOS 等操作系统上。它包含了 Writer, Calc, Impress, Draw, Math 以及 Base 等组件,可分别用于文本文档、...

Zeran2阅读 6.3k

之前很火给女朋友推送微信服务号消息是怎么做的?
经过了几天的奋战,终于把微信服务号的模板消息给写完了。后端其实没花多少时间,因为之前已经有同学提过pull request了,我在这基础之上简单优化下就完事了,主要的时间都是花在前端上,对前端页面和参数的适配...

Java3y3阅读 1.2k

简单使用spring cloud 服务注册做一个请求转发中心
背景上篇文章 记录多项目共用一个公众号逻辑修改, 实现了多个项目共用一个公众号。 但是也存在几点问题,比如:中间服务器拦截了微信的请求,虽然方便了项目不再需要写微信授权的代码,但如果以后需要再拓展新的...

weiweiyi2阅读 772

消息推送平台终于要上线啦!
我的开源项目消息推送平台Austin终于要上线了,迎来在线演示的第一版!🔥项目在线演示地址:[链接]消息推送平台🔥推送下发【邮件】【短信】【微信服务号】【微信小程序】【企业微信】【钉钉】等消息类型。[链接][链...

Java3y3阅读 1.1k

Java项目是不是分布式,真有那么重要吗?
「微服务」「分布式」在我刚毕业的时候还是比较关注的,那时候还入门了一把SpringCloud,写了一篇很长的文章,还是很顶的,有不少的大号都给我转载了,在知乎又获得了很多的赞。

Java3y2阅读 586评论 1

82 声望
6 粉丝
宣传栏