the 'access-control-allow-origin' header contains multiple values '*, http:/
Access-Control-Allow-Origin头字段用于指定哪些源（域、协议或端口）被允许访问资源。当这个头字段包含多个值时，通常是由于服务器配置错误或代码逻辑问题导致的。下面我将详细解释这个问题及其解决方案。
基础概念
Access-Control-Allow-Origin是CORS（跨源资源共享）协议的一部分，用于控制浏览器在跨域请求时是否允许访问资源。当一个网页尝试从与其不同的源加载资源时，浏览器会发送一个预检请求（OPTIONS请求），以确定目标服务器是否允许这种跨域请求。
问题原因
- 服务器配置错误：服务器可能被配置为同时允许所有源（
*）和特定的源（如http://example.com），这会导致头字段包含多个值。 - 代码逻辑问题：在编写处理CORS的代码时，可能存在逻辑错误，导致多次设置
Access-Control-Allow-Origin头字段。
解决方案
1. 检查服务器配置
确保服务器只设置一次Access-Control-Allow-Origin头字段。例如，在Nginx中，可以这样配置：
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
}2. 检查代码逻辑
如果你是在代码中动态设置这个头字段，确保只设置一次。例如，在Node.js中使用Express框架时：
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization');
next();
});
app.get('/data', (req, res) => {
res.json({ message: 'This is data from the server.' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});3. 动态设置特定源
如果你需要动态设置特定的源，可以使用一个函数来处理：
const allowedOrigins = ['http://example1.com', 'http://example2.com'];
app.use((req, res, next) => {
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.header('Access-Control-Allow-Origin', origin);
} else {
res.header('Access-Control-Allow-Origin', '*');
}
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization');
next();
});应用场景
- Web应用：当你的Web应用需要从不同的源加载资源时。
- API服务：当你的API服务需要允许跨域请求时。
- 单页应用（SPA）：当你的单页应用需要从不同的源加载数据时。
优势
- 安全性：通过控制哪些源可以访问资源，可以提高应用的安全性。
- 灵活性：可以根据需要动态设置允许的源，从而实现更灵活的资源访问控制。
通过以上方法，你可以有效地解决Access-Control-Allow-Origin头字段包含多个值的问题，并确保你的应用能够正确处理跨域请求。
相关·内容
我想在nginx配置中添加访问控制-允许-原产地标头，用于一个域，但同时用于http和httpsadd_header 'Access-Control-Allow-Origin' "https://example.com http://example.com" always;The 'Access-Control-Allow-Origin' <e
浏览 0提问于2020-06-22得票数 1
1回答
Chrome表示No 'Access-Control-Allow-Origin' header is present on the requested resource.是CORS的一个问题。然后我删除它并转到Nginx来配置CORS： add_header' header con
浏览 17提问于2022-05-17得票数 0
'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.
浏览 751提问于2018-08-25
在我的Go API中，我使用gin，并且在我的Access-Control-Allow-Origin头中设置了一个值。如果我有多个用户界面，我的react就会抛出一个错误来影响The Access-Control-Allow-Origin header contains multiple values 'http://value1, http://value2', but only one i
浏览 9提问于2022-02-07得票数 0
回答已采纳
1回答
XMLHttpRequest cannot load http://192.168.1.7:8080/auth/realms/app1/protocol/openid-connect/token.Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' headercontains</e
浏览 0提问于2017-07-11得票数 1
回答已采纳
1回答
1728000"); }
然后我得到了我还尝试在web.config文件中添加一个条目，如下所示 <customHeaders>
浏览 2提问于2017-05-11得票数 1
' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple valuesby CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.http:/
浏览 0提问于2019-03-20得票数 1
' header contains multiple values '*, https://demo.aonesalons.com', but only one is allowed.$ CORS_ALLOW_ORIGIN=$1
#Header append Access-Control-Allow-Origin %{CORS_ALLOW_ORIGIN}e env=CORS_ALLOW_ORIGIN下面是我的ssl.conf的样
浏览 1提问于2018-02-13得票数 2
回答已采纳
我在.htaccess试过Header always set块封装起来似乎可以解决选项身份验证的飞行前错误，但现在得到：
Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin<
浏览 2提问于2018-10-10得票数 0
1回答
我对.NET核心应用程序的AJAX调用不起作用。在本地主机上，一切正常，但是在将应用程序发布到我的服务器之后，AJAX调用得到了CORS策略错误：
我试着检查了CORS策略，AJAX中的头文件，一切看起来都很好。 url: DashboardController + "GetLoggedInUser", "contentType":
浏览 0提问于2019-02-15得票数 1
当我向跨服务器发送ajax请求时，我得到了这个错误The 'Access-Control-Allow-Origin' header contains multiple values '*, http:/我添加了add_header 'Access-Control-Allow-Origin' 'http://localhost.dev';
浏览 9提问于2018-01-23得票数 0
在我的NGINX配置中，在将其传递到包含我的Node应用程序的授权端口之前，我将按如下方式添加允许源标头： add_header Access-Control-Allow-Origin*;}app.use((req, res, next) => {res.setHeader('Access-Control-Allow
浏览 0提问于2016-02-03得票数 3
回答已采纳
://myapi.com/GetAllUsersList: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost, *', but only one
浏览 2提问于2020-11-14得票数 0
回答已采纳
请求另一个服务缺少CORS设置，我预计在这种状态下没有CORS相关的标头： curl -sD - -o /dev/null https://api.example.xom/service 响应的头部： HTTP' header is present on the requested resource.然后，我们将以下标头添加到.htaccess中的Apache配置中： <IfModule mod_headers.c>
Header set Access-
浏览 82提问于2020-01-26得票数 0
回答已采纳
1回答
Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' headercontains multiple values '*, http://localhost:9000', but only one is allowed.Origin 'http:&#
浏览 2提问于2016-04-22得票数 0
1回答
我的Ajax代码是： type: "Get",
url: "http://84.241.41.5:8000/Sale.svc/GetDataReportSaleOfMonth",
浏览 3提问于2015-06-24得票数 0
回答已采纳
2回答
Response to preflight request doesn't pass access control check: The only one is allowed.Origin 'http://jotdotfrontend.mysite.com&#
浏览 0提问于2015-11-04得票数 4
filter[meta]=true&filter[variation]=true' request doesn't pass access control check: The 'Access-Control-Allow-Origin' header <em
浏览 0提问于2019-02-05得票数 0
当我尝试调用服务器时，我收到以下错误： has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header containsmultiple values '*, *, *, *, *, *, *, *, *, *, *, *, *, *, *, *, *', but only one is allowed."Access-Control-Allow-Origin</e
浏览 59提问于2021-04-03得票数 3
1回答
编辑Accessto XMLHttpRequest at 'http://localhost/mybackend/token' from origin 'http://l
浏览 2提问于2020-03-09得票数 1
云服务器
ICP备案
云直播
对象存储
实时音视频
腾讯云开发者
