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

2
votes

I have a socket.io server running and I cannot connect to it form my local html file on my mac.

Error:

Failed to load http://file/socket.io/?EIO=3&transport=polling&t=M6tFqlm: 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 'null' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Server:

var app = require('express')();
var server = app.listen(8080);
var cors = require('cors');

app.options('*', cors());
var io = require('socket.io').listen(server);

....

// think this is redudant
server.listen(8080);

Local HTML file (no local server running it)

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
</head>
<body>

  <script src="../socket.io-client/dist/socket.io.js"></script>
<script>
    // Create SocketIO instance, connect

    // var socket = new io.Socket();
    var socket = io();


    //var socket = io('https://example.com:8080', { transport : ['websocket'] });
    socket.connect('https://example.com:8080'); 

    // Add a connect listener
    socket.on('connect',function() {
      console.log('Client has connected to the server!');
    });
    // Add a connect listener
    socket.on('message',function(data) {
      console.log('Received a message from the server!',data);
    });
    // Add a disconnect listener
    socket.on('disconnect',function() {
      console.log('The client has disconnected!');
    });

    // Sends a message to the server via sockets
    function sendMessageToServer(message) {
      socket.send(message);
    };
</script>
  <div id="date"></div>
  <textarea id="text"></textarea>
</body>
</html>
2
javascriptnode.jsexpresssocket.io
Have you tried changing <script src="../socket.io-client/dist/socket.io.js"></script> to <script src="/socket.io/socket.io.js"></script> – CodeLover
Finding the socket.io client js file isn't the issue. The error is because of cross browser request. I tried the CORS chrome plugins but they do not help. – jdog
Ok. Next, have you changed this app.options('*', cors()); to app.use(cors());? – CodeLover
Yes and failed. – jdog
Is your node websocket server running in multiple instances (cluster mode) or fork mode? I have encountered a problem similar to this before – CodeLover

2 Answers

2
votes

According to MDN you have Access-Control-Allow-Credentials header set to include which requires a server to specify that this domain can access cookies etc. - which makes sense - you don't want to send cookies or credentials to just any site.

If you only have an HTML file that's is not hosted anywhere all you can do is disable credentials, so they are not sent. I've looked on the internet and I think you can set it like:

var socket = io({
  extraHeaders: {
    'Access-Control-Allow-Credentials': 'omit'
  }
});

Alternatively, you could just disable CORS in a browser, but of course, it's last resort technique which opens yourself to security issues.

0
votes

I had a lot of pain with CORS

but you should set a specific domain and it will help you a lot.

var cors = require('cors')
var app = express()

var corsOptions = {
  origin: function (origin, callback) {
    if (any_logic_you_want) {
      //this is not tested, just copied from npm cors docs
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

app.use(cors(corsOptions));