Spring Cloud Gateway CORS 跨域配置

小渣渣

项目是前后端分离，前端和后端不在一个端口上面，前端调用后端接口就存在跨域的问题，一次 HTTP 请求，首先达到网关，在经过网关的转发请求到后端。

如果网关为允许跨域，会报错如下：

Access to XMLHttpRequest at 'http://127.0.0.1:9999/gateway/auth/account/requestToken' from origin 'http://localhost:60356' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jquery.min.js:2 POST http://127.0.0.1:9999/gateway/auth/account/requestToken net::ERR_FAILED

关于 Spring Cloud Gateway CORS 配置文档教程：https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/#cors-configuration

修改 application.yml 配置文件如下：

登录可见。

设置完成后，重新运行项目，由于微服务本身也设置了允许跨域，在 POST 响应头会出现重复的内容，报错如下：

Access to XMLHttpRequest at 'http://127.0.0.1:9999/gateway/auth/account/requestToken' from origin 'http://localhost:60356' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:60356, http://localhost:60356', but only one is allowed.

解决方案，新建 CorsResponseHeaderFilter 过滤器，剔除一些相同的响应头，代码如下：

登录可见。

新建 CorsConfiguration 文件，注册 Bean，代码如下：

登录可见。

成功解决问题，如下图：



(完)