11

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 ?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Hamza Haddad
  • 1,516
  • 6
  • 28
  • 48
  • 2
    I'm using cors module and have no issue about that: `const cors = require('cors'); app.use(cors());` – num8er May 30 '18 at 23:03
  • @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. – JoJo Apr 29 '22 at 17:21

2 Answers2

22

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));
Marcos Casagrande
  • 37,983
  • 8
  • 84
  • 98
  • 1
    setting 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.` – Hamza Haddad May 30 '18 at 23:13
  • 1
    You're missing the header: `Access-Control-Allow-Credentials'`, check updated answer. – Marcos Casagrande May 30 '18 at 23:13
  • 2
    nice, the only error now is `zone.js:2969 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MEpLcDy 404 (Not Found)` – Hamza Haddad May 30 '18 at 23:17
  • 1
    Glad 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. – Marcos Casagrande May 30 '18 at 23:18
  • @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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) But I don't understand http enough to know why. Thanks – Nate Thompson Mar 26 '19 at 15:42
  • 1
    did'nt work for me.is anyone able to solve this yet? – Pragati Dugar Apr 18 '20 at 21:58
  • Access-Control-Allow-Credentials should not be a boolean, but it should be a string: 'true' – Remi Feb 22 '23 at 12:21
16

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)

mrtnlrsn
  • 1,105
  • 11
  • 19