Socket.io cors error by using node, react and socket.io

Question

We are using CORS to allow all origins

app.use(cors());

server running on port 4000, and client running on 3000

here is my server.js code

const cors = require("cors");
const http = require("http");
const socketIO = require("socket.io");

app.use(cors());

const port = process.env.PORT || process.env.DEFAULT_PORT;
console.log("port: ", port);
app.listen(port, () => {
  console.log(`App listening at ${port}...`);
});

const server = http.createServer(app);

const io = new socketIO(server, {
  transports: ["websocket"],

});

React js code

  constructor(props) {
    super(props);
    try {
      this.socket = io("http://localhost:4000", { transport: ["websocket"] });

      this.socket.on("Chat-event", data => {
        console.log("socketdata", data);
      });
    } catch (error) {
      console.log("hiterror", error)
    }
  }

I am continuously getting this error on the client side after allowing origin for all.

Access to XMLHttpRequest at 'http://localhost:4000/socket.io/?EIO=3&transport=polling&t=Mv-SSIc' from origin 'http://localhost:3000' has been blocked by CORS policy: 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

check this https://stackoverflow.com/questions/24058157/socket-io-node-js-cross-origin-request-blocked — Afraz Ahmad, Nov 18 '19 at 12:48

score 5 · Answer 1 · answered Nov 19 '20 at 01:12

5

For socket.io version 3.x.x cors configuration has changed, I managed to fix it by adding options to the socket creation. Tried on the version 2.x.x also and it worked.

  const io = socketio(httpServer, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
    credentials: true
  }
});

Here is the resource https://socket.io/docs/v3/handling-cors/

Bonus: In case you encounter Bad Request make sure you have the same version of socket.io for the client and the server.

answered Nov 19 '20 at 01:12

1

Thank you very much, this answer gave me solution. – Archil Labadze Jan 12 '21 at 20:10
1

This worked for me, My client side package.json was "socket.io-client":^2.4.0 while my backend package.json was "socket.io": ^4.4.0. I npm uninstalled socket.io-client from client and then re installed with npm install socket.io-client@4.4.0 and my websocket connected – AmandaConda Dec 05 '21 at 06:33

score 1 · Answer 2 · edited Feb 06 '21 at 17:45

By following these steps you can get rid of these error.

// 1) on server side

const cors = require('cors');
const socketio = require('socket.io')
const http = require('http');
const server = http.createServer(app);

const io = socketio(server, {
    cors: {
        origin: localhost:3000/, //your website origin
        methods: ["GET", "POST"],
        credentials: true
    }
});

// 2) add these middlewares
app.use(cors())
app.options('*', cors());

// 3) on client-side
import io from 'socket.io-client'
let socket = io.connect(localhost:8080, { transports: ['websocket'] }) // your local server

score 0 · Answer 3 · answered Nov 18 '19 at 12:57

0

try using the cors credentials config:

app.use(cors({credentials: true}));

answered Nov 18 '19 at 12:57

Brad Ball

599
3
5

didn't make any difference – Abtisam Ahmed Nov 18 '19 at 13:02

score 0 · Answer 4 · answered Nov 18 '19 at 13:01

0

Please allow all to socket.io at server side

const socketIO = require('socket.io')(server, { origins: '*:*'});

Or you can set socketIO origins as *

socketIO.set('origins', '*:*');

answered Nov 18 '19 at 13:01

Paresh Barad

1,544
11
18

Doesn't make any difference , remember I am using socket.io version 2.2.0 for both client and server – Abtisam Ahmed Nov 18 '19 at 13:08
have you checked your .htaccess file? maybe its help you – Paresh Barad Nov 18 '19 at 13:15
from where i can access this ? – Abtisam Ahmed Nov 18 '19 at 13:17
Please check in your server >> app and add `Header add Access-Control-Allow-Origin "*" Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"` – Paresh Barad Nov 18 '19 at 13:22

score 0 · Answer 5 · answered Jan 12 '21 at 20:12

@user4860402 Gave me solution, thing is that by default npm is installing socket.io client v 2.X.X but on server I'm using latest verion (also provided by npm) 3.0.5 So all problems including 400 error comes because client and server verion doesnot match.

score -1 · Answer 6 · edited Mar 09 '21 at 06:24

-1

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const socketio = require("socket.io");
const cors = require("cors");
const io = socketio(http, {cors:{origin:"*"}});

edited Mar 09 '21 at 06:24

Jin Lee

3,194
12
46
86

answered Mar 08 '21 at 13:26

Harshavardanan

1

Socket.io cors error by using node, react and socket.io

6 Answers6