当请求的凭证模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”

Posted 2023-03-04

【中文标题】当请求的凭证模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”

【英文标题】：Value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

【发布时间】：2018-11-09 21:10:33

【问题描述】：

我试图在 Angular 和 Nodejs 服务器之间连接 socket.io

在 Angular 中，我声明了一个新的套接字并连接它 从'socket.io-client'导入*作为io； ... @零件 ... const socket = io.connect('http://localhost:3000');

在后端：server.js

const express = require('express');
const app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.set('origins', 'http://localhost:4200');

var routes = require('./routes/routes')(io);

app.use(bodyParser.urlencoded( extended: true ));
app.use(bodyParser.json());
app.use(function (req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT ,DELETE");
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept"
    );
    next();
);
io.on('connection', function (socket) 
    socket.emit('news',  hello: 'world' );
    console.log("connectd");
);
app.use('/', routes);
var server = app.listen(3000, function (io) 
)

应用正在编译并从服务器获取数据。但只有 socket.io 不工作 我收到此错误：

localhost/:1 无法加载http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MEpHAtN：当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”。因此，Origin 'http://localhost:4200' 不允许访问。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

为什么在服务器端配置 CORS 后错误仍然存​​在？

【问题讨论】：

我正在使用 cors 模块并且对此没有任何问题：const cors = require('cors'); app.use(cors());

使用res.header("Access-Control-Allow-Origin", req.headers.origin)

【参考方案1】：

对于简单的无安全性 socket.io (v.4) 服务器配置尝试：

const ios = require('socket.io');
const io = new ios.Server(
    allowEIO3: true,
    cors: 
        origin: true,
        credentials: true
    ,
)
io.listen(3000, () => 
    console.log('[socket.io] listening on port 3000')
)

（仅当您希望与旧的 socket.io 客户端兼容时才需要allowEIO3）

【讨论】：

这里解决了我的问题，非常感谢

你救了我????? 谢谢！！！！！！

【参考方案2】：

信息很清楚：

响应中“Access-Control-Allow-Origin”标头的值 当请求的凭据模式为 '包括

发生这种情况是因为您将XMLHttpRequest 上的属性withCredentials 设置为true。所以你需要去掉通配符，并添加Access-Control-Allow-Credentials header。

res.header("Access-Control-Allow-Origin", "http://localhost:4200");
res.header('Access-Control-Allow-Credentials', true);

您可以使用cors 包，轻松实现白名单：

const cors = require('cors');
const whitelist = ['http://localhost:4200', 'http://example2.com'];
const corsOptions = 
  credentials: true, // This is important.
  origin: (origin, callback) => 
    if(whitelist.includes(origin))
      return callback(null, true)

      callback(new Error('Not allowed by CORS'));
  


app.use(cors(corsOptions));

【讨论】：

将 res.header 设置为 localhost:4200，导致相同的错误但没有“*”。 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

您缺少标题：Access-Control-Allow-Credentials'，检查更新的答案。

很好，现在唯一的错误是zone.js:2969 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MEpLcDy 404 (Not Found)

很高兴它成功了。由于这是一个不同的错误，并且与原始问题无关，因此我建议打开一个新问题，我很乐意对其进行审查。

@MarcosCasagrande 嗨，您是否会碰巧知道或愿意解释为什么不允许以下内容？ res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Credentials', true); 我找到了这个问题的文档here 但我对 http 的了解还不够，不知道为什么。谢谢