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 stackoverflow.com/questions/24058157/…

Afraz Ahmad
– Afraz Ahmad

2019-11-18 12:48:31 +00:00
Commented Nov 18, 2019 at 12:48 — Afraz Ahmad
– Afraz Ahmad, Commented Nov 18, 2019 at 12:48
Still getting the same error

Abtisam Ahmed
– Abtisam Ahmed

2019-11-18 12:53:35 +00:00
Commented Nov 18, 2019 at 12:53 — Abtisam Ahmed
– Abtisam Ahmed, Commented Nov 18, 2019 at 12:53

user4860402 · Accepted Answer · 2020-11-19 01:12:23Z

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, 2020 at 1:12

user4860402

Sign up to request clarification or add additional context in comments.

2 Comments

Archil Labadze Over a year ago

Thank you very much, this answer gave me solution.

AmandaConda Over a year ago

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 [email protected] and my websocket connected

Antoine Delia · Accepted Answer · 2021-02-06 17:45:27Z

1

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

edited Feb 6, 2021 at 17:45

Antoine Delia

1,8456 gold badges29 silver badges45 bronze badges

answered Feb 6, 2021 at 11:46

Shoaib Amin

1011 silver badge2 bronze badges

Comments

Brad Ball · Accepted Answer · 2019-11-18 12:57:16Z

0

try using the cors credentials config:

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

answered Nov 18, 2019 at 12:57

Brad Ball

6194 silver badges5 bronze badges

1 Comment

Abtisam Ahmed Over a year ago

didn't make any difference

Paresh Barad · Accepted Answer · 2019-11-18 13:01:09Z

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, 2019 at 13:01

Paresh Barad

1,60912 silver badges19 bronze badges

4 Comments

Abtisam Ahmed Over a year ago

Doesn't make any difference , remember I am using socket.io version 2.2.0 for both client and server

Paresh Barad Over a year ago

have you checked your .htaccess file? maybe its help you

Abtisam Ahmed Over a year ago

from where i can access this ?

Paresh Barad Over a year ago

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"

Archil Labadze · Accepted Answer · 2021-01-12 20:12:26Z

0

@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.

answered Jan 12, 2021 at 20:12

Archil Labadze

4,3454 gold badges29 silver badges47 bronze badges

Comments

Jin Lee · Accepted Answer · 2021-03-09 06:24:06Z

-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 9, 2021 at 6:24

Jin Lee

3,57814 gold badges57 silver badges93 bronze badges

answered Mar 8, 2021 at 13:26

Harshavardanan

1

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related