Value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'
Solution 1
The message is clear enough:
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
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);
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));
Solution 2
For a simple no-security socket.io (v.4) server configuration try:
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')
})
(allowEIO3
is only needed if you want compatiblity with older socket.io clients)
Hamza Haddad
Updated on July 09, 2022Comments
-
Hamza Haddad almost 2 years
I trying to connect socket.io between Angular and Nodejs Server
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');
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) { })
The app is compiling and getting data from server. but only socket.io is not working I get this error:
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.
Why is error persist even after configuring CORS in server side ?
-
num8er almost 6 yearsI'm using cors module and have no issue about that:
const cors = require('cors'); app.use(cors());
-
JoJo about 2 years@sideshowbarker that's basically no better than setting the Access-Control-Allow-Origin to *. The origin in the request should be compared to an array of whitelisted domains that's set on the back end.
-
-
Hamza Haddad almost 6 yearssetting res.header to localhost:4200, caused same error but without '*'.
'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.
-
Marcos Casagrande almost 6 yearsYou're missing the header:
Access-Control-Allow-Credentials'
, check updated answer. -
Hamza Haddad almost 6 yearsnice, the only error now is
zone.js:2969 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MEpLcDy 404 (Not Found)
-
Marcos Casagrande almost 6 yearsGlad it worked. Since that is a different error, and has nothing to do with the original question, I recommend opening a new one, and I will gladly review it.
-
Nate Thompson about 5 years@MarcosCasagrande Hi would you happen to know, or care to explain why the following is not allowed?
res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Credentials', true);
I found the docs for this issue here But I don't understand http enough to know why. Thanks -
Pragati Dugar about 4 yearsdid'nt work for me.is anyone able to solve this yet?
-
cheesemas46 almost 3 yearsThis right here solved my issue, thank you so much
-
Marcelo Pessoa over 2 yearsYou save me 🙌🙌🙌🙌🙌 Thanks!!!!!