Needing a websocket with my website, I wanted to use socket.io.

However, I am experiencing a CORS issue:

Access to XMLHttpRequest at 'http://localhost:2021/socket.io/?EIO=4&transport=polling&t=NlbFGS2' from origin 'http://localhost:63341' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
polling-xhr.js:202 

GET http://localhost:2021/socket.io/?EIO=4&transport=polling&t=NlbFGS2 net::ERR_FAILED

So I found this code on the socket.io site that I tried but I still have the same problem...

const app = require('express')();
const http = require('http').createServer(app);
const io = require("socket.io")(http, {
    cors: {
        origin: ["http://localhost:63341/"],
        methods: ["GET", "POST"]
    }
})

And here is the code on the client side:

<script src="/[email protected]/dist/socket.io.msgpack.min.js"></script>
<script>
    let socket = io('http://localhost:2021')
</script>

Needing a websocket with my website, I wanted to use socket.io.

However, I am experiencing a CORS issue:

Access to XMLHttpRequest at 'http://localhost:2021/socket.io/?EIO=4&transport=polling&t=NlbFGS2' from origin 'http://localhost:63341' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
polling-xhr.js:202 

GET http://localhost:2021/socket.io/?EIO=4&transport=polling&t=NlbFGS2 net::ERR_FAILED

So I found this code on the socket.io site that I tried but I still have the same problem...

const app = require('express')();
const http = require('http').createServer(app);
const io = require("socket.io")(http, {
    cors: {
        origin: ["http://localhost:63341/"],
        methods: ["GET", "POST"]
    }
})

And here is the code on the client side:

<script src="https://cdn.jsdelivr/npm/[email protected]/dist/socket.io.msgpack.min.js"></script>
<script>
    let socket = io('http://localhost:2021')
</script>

• javascript
• node.js
• sockets
• websocket
• socket.io

Share Improve this question Follow asked Sep 14, 2021 at 17:57 CetusCetus 5511 silver badge55 bronze badges 2

• 1 localhost:63341 is not the same as localhost:2021 – Joe Commented Sep 14, 2021 at 17:59
• @Joe your answer reminded me of this tortilla picture lmao duckduckgo./… – Daniel Commented Sep 14, 2021 at 18:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Follow these steps on your backend server:

1. Run npm install cors

2. Add this code after creating app:

   app.use(cors({
       origin: "http://localhost:63341"
   }))
   

3. Restart your server and check if it works or not.

4. If it still doesn't work, then change your line 3 with this:

   const io = require("socket.io")(http); // no cors configuration.
   

You could use this to just allow anything to connect... Don't do this in production though.

export const io = new Server(http, {
  cors: { origin: "*" },
});

// at server side
const io = require('socket.io')(http, {
  cors: {
    origin: "http://localhost:4200",
    methods: ["GET", "POST"],
    credentials: true
  }
});

// at client side
  this.socket = io('http://localhost:5000', {
      withCredentials: true
    });

replace http://localhost:4200 with your url

You can use this code to fix the problem: This code allows all origins to connect, * means allowing everything. WARNING: DO NOT DO THIS IN PRODUCTION, BECAUSE THERE WILL BE SECURITY RISKS

const server = require('http').createServer();
const io = require('socket.io')(server,{
    cors: { origin : "*"}
});