微服务跨域问题｜The ‘Access-Control-Allow-Origin‘ header contains multiple values

个人博客：无奈何杨（wnhyang）

个人语雀：wnhyang

共享语雀：在线知识共享

Github：wnhyang - Overview

---

Spring Cloud Gateway CORS 方案看这篇就够了-腾讯云开发者社区-腾讯云

九种跨域方式实现原理（完整版） - 掘金

以下为AI回答

跨域是指由于浏览器的安全机制，当一个页面尝试通过 XMLHttpRequest 或 Fetch API 等方式向不同于当前页面源（协议、域名、端口三者之一不同的 URL）发起请求时，会被浏览器阻止，这称为“同源策略”限制。这是为了防止恶意网站通过脚本对其他网站的数据进行非法访问。

解决跨域问题的方法有很多种，以下是常见的几种：

1、CORS（Cross-Origin Resource Sharing）

CORS 是一种 W3C 标准，允许服务器表明哪些其他源可以请求资源。服务器通过设置响应头（如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等）来允许特定源或者所有源进行跨域请求。客户端（浏览器）在接收到响应后判断是否符合 CORS 规则，若符合则允许数据交互。

2、JSONP（JSON with Padding）

JSONP 是一种非正式传输协议，它利用

3、代理服务器（Proxy Server）

通过在服务器端设置一个代理，使得所有的请求都先经过这个代理服务器，然后由代理服务器转发给目标服务器，这样在浏览器看来，始终是在同一个源下进行通信。

4、document.domain + iframe

对于两个同顶级域名下的页面，可以通过修改各自的 document.domain 属性来允许它们之间的通信。

5、window.postMessage()

HTML5 提供了 window.postMessage 方法，允许来自不同源的脚本采用异步方式进行有限的通信，可以在窗口间发送消息。

6、WebSockets

虽然 WebSocket 连接建立之初也会遇到同源策略限制，但它本身提供了机制来处理跨域连接，服务器可以在握手阶段设置 Origin 头部来控制哪些源可以建立连接。

现代 web 开发中，CORS 是最常用的跨域解决方案，因为它支持更广泛的请求类型（不仅仅是 GET）和更安全的通信模式。然而，在某些特定场景下，如兼容旧版浏览器或者简单的 GET 请求，JSONP 仍然是一个可行的选择。

当我们在网关和子服务都配置了允许特定源的跨域请求时，还是会出现以下问题。

The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, http://localhost:5173’, but only one is allowed.

从提示来看，是头包含了多个值。

果然，Access-Control-Allow-Origin确实包含了多个值，这就是问题根源，具体的分析可以参考Spring Cloud Gateway CORS 方案看这篇就够了-腾讯云开发者社区-腾讯云文章。

既然是重复配置了，那么去掉一个就行了，如下是我的子服务和网关的配置，我是删去了子服务的配置。

当然还有一种方法是在中去除重复的。

拙作艰辛，字句心血，望诸君垂青，多予支持，不胜感激。

---

个人博客：无奈何杨（wnhyang）

个人语雀：wnhyang

共享语雀：在线知识共享

Github：wnhyang - Overview