socket.io, 'Access-Control-Allow-Origin' error

11

votes

I have set up a node server with socket io turning and trying to connect to it through another server. However some browsers on different computers give me this error and makes it reconnect the whole time:

XMLHttpRequest cannot load https://serverDomain.net:3000/socket.io/?EIO=3&transport=polling&t=Lo_SdiU. 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 'https://www.differentServerDomain.fr' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

my js config:

var port = 3000;
var fs = require('fs');
var https = require('https');
var express = require('express');
var app = express();

var options = {
    key: fs.readFileSync('/etc/letsencrypt/live/devpeter.net/privkey.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/devpeter.net/fullchain.pem')
};
var server = https.createServer(options, app);
var io = require('socket.io')(server);
io.origins('https://www.differentServerDomain.fr:* https://www.differentServerDomain.fr/wp-admin/index.php:*');

// start of server
server.listen(port, function(){
    console.log('listening on *: '+ port + "\n");
});

I am using node 8.0 and socket io 2.2, Your help will be greatly appreciated.

EDIT: here is the client code:

<script src="https://serverDomain.net:3000/socket.io/socket.io.js"></script>
<script>
   var socket = io('https://serverDomain.net:3000');
</script>

javascriptnode.jssocket.iocors

24

votes

i have found a solution. for some reason the default transportation method is not always allowed by all servers.

so i specified a neutral transportation method at the client side, like so:

var socket = io('https://yourDomain:3000', { transport : ['websocket'] });

22

votes

This worked for me

var socket = io('http://yourDomain:port', { transports: ['websocket', 'polling', 'flashsocket'] });

19

votes

For users of Socekt io v3

You need to use option credentials in cors options of server config.

Example:

const io = require('socket.io')(strapi.server, {
  cors: {
    origin: "http://localhost:3000",
    credentials: true
  }
});

Docs:

https://expressjs.com/en/resources/middleware/cors.html https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Migration guide

https://socket.io/docs/v3/migrating-from-2-x-to-3-0/index.html#CORS-handling

8

votes

In Client code add this, I got error "NO Access-Control-Allow-Origin' header is present". so added this on client side.

var connectionOptions =  {
            "force new connection" : true,
            "reconnectionAttempts": "Infinity", 
            "timeout" : 10000,                  
            "transports" : ["websocket"]
        };

        this.socket = io.connect('http://localhost:5000',connectionOptions);

5

votes

Try this, it worked for me:

const io = require("socket.io")(httpServer, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

4

votes

I recently faced the same issue and the solution that worked for me was the following:

//in the React project install socket.io-client and then

import io from 'socket.io-client'   

var socket = io('http://localhost:<your_port_number>', {transports: ['websocket', 'polling', 'flashsocket']});

2

votes

Hope this modification will help you.

    var port = 3000;
    var fs = require('fs');
    var https = require('https');
    var express = require('express');
    var app = express();

    app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "https://www.differentServerDomain.fr https://www.differentServerDomain.fr");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();
    });


    var options = {
        key: fs.readFileSync('/etc/letsencrypt/live/devpeter.net/privkey.pem'),
        cert: fs.readFileSync('/etc/letsencrypt/live/devpeter.net/fullchain.pem')
    };
    var server = https.createServer(options, app);
    var io = require('socket.io')(server);

    // start of server
    server.listen(port, function(){
        console.log('listening on *: '+ port + "\n");
    });

2

votes

Also please check server-side log having this msg "info - unhandled socket.io url" or not. if shown, please upgrade your socket.io version to 1.0+. I solved it by this approach.

npm install [email protected]

or change package.json like that:

"dependencies": {
    "socket.io": "^1.0"
}

0

votes

Specify the following on the client-side.

const socket = io('https://yourDomain:3000', { transports: ['websocket'] });

instead of const socket = io('https://yourDomain:3000');

socket.io, 'Access-Control-Allow-Origin' error

9 Answers