“Access-Control-Allow-Origin”标头包含多个值“http://localhost:3000, http://localhost:3000”，但只允许一个答案

【问题标题】：The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, http://localhost:3000', but only one is allowed“Access-Control-Allow-Origin”标头包含多个值“http://localhost:3000, http://localhost:3000”，但只允许一个
【发布时间】：2019-11-05 01:13:41
【问题描述】：

到目前为止，关于 SO 的任何答案都无法帮助我找到解决方案。我正在尝试从本地主机访问我在Ubuntu 服务器上使用Nginx 提供的API。这是Nginx 配置的样子：

当我从 React 应用程序调用它时，我收到了错误：

从源“http://localhost:3000”对“https://api.zapas.tech/manufacturers”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：“Access-Control-Allow-Origin”标头包含多个值“http://localhost:3000、http://localhost:3000”，但只允许一个。

虽然来自 Postman 的相同请求运行良好。我很确定在 React 应用程序中没有任何与 CORS 相关的内容。

【问题讨论】：

标签： reactjs ubuntu nginx cors

【解决方案1】：

你的请求方法有选项吗？如果是这样，您将添加两次标题。

您正在添加： 1,2,3

如果 'if' 条件为真，您还可以添加： 1,2,3，附加数据。

所以如果条件为真，你的数据看起来像：1,2,3,1,2,3，附加数据

只需删除 if 循环中的重复项，它可能会起作用:)

【讨论】：

我同意这个答案。问题中的现有代码会导致两个 Access-Control-Allow-Origin 响应标头被发回。当浏览器接收到这些值时，它会用逗号连接它们的值，然后评估该组合值。所以需要更改问题中现有的 nginx 配置代码，以防止它像现在这样发送多个 Access-Control-Allow-Origin 响应标头。
进一步，对于 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 头，服务器只需要发送那些响应 OPTIONS 请求。对 OPTIONS 请求的响应是浏览器检查这些标头的唯一情况。它们不需要被发送来响应 GET 或 POST 或其他任何东西。因此它们可以从问题中的 nginx 配置代码的第一部分中删除，但只保留在处理响应 OPTIONS 请求的部分中。