Search code examples
javascriptnode.jssocketswebsocketsocket.io

CORS issue with socket.io


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.net/npm/socket.io-client@4.1.2/dist/socket.io.msgpack.min.js"></script>
<script>
    let socket = io('http://localhost:2021')
</script>

Solution

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