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

问题描述：

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

I trying to connect socket.io between Angular and Nodejs Server

在Angular中我声明了一个新的套接字并将它连接起来
import * as io from socket.io客户端;
...
@component
...
const socket = io.connect（' http：// localhost：3000 '）;

In Angular I have declared a new socket and connect it import * as io from 'socket.io-client'; ... @component ... const socket = io.connect('http://localhost:3000');

在后端：server.js

In back end : 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不工作
我收到此错误：

The app is compiling and getting data from server. but only socket.io is not working I get this error:

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

localhost/:1 Failed to load http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MEpHAtN: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 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.

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

Why is error persist even after configuring CORS in server side ?

答

消息很清楚：

当请求的凭据模式为
时，响应
中的'Access-Control-Allow-Origin'标头的值不能是通配符'*' 'include

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include

这是因为你正在设置属性 withCredentials XMLHttpRequest 到 true 。因此，您需要删除通配符，并添加 Access-Control-Allow-Credentials 标题。

This happens because you're setting the property withCredentials on your XMLHttpRequest to true. So you need to drop the wildcard, and add Access-Control-Allow-Credentials header.

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

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

You can use cors package, to easily implement a whitelist:

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));

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

相关推荐