Socket IO error "Access to XMLHttpRequest has been blocked by CORS policy"

Question

my app has recently received an error

"Access to XMLHttpRequest at 'https://my-service-domain/socket.io/?EIO=3&transport=polling&t=M-eWtUQ' from origin 'https://my-app-domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

when i connecting to socket.io. I have not yet found a solution to this problem, I will describe in detail as the image below, has anyone ever encountered this error.

Server config:

var express = require('express');
var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  next();
});
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server, {log:false, origins:'*:*'});

Client config:

var socket = io('https://my-service-domain', {transports: ['polling']});
socket.on(channel_id, function(data){
     // some code
});

I tried to switch the websocket connection option var socket = io('https://my-service-domain', {transports: ['websocket']}), I got the error

"WebSocket connection to 'wss://my-service-domain/socket.io/?EIO=3& transport = websocket' failed: Error during WebSocket handshake: Unexpected response code: 400 "

Answer 1

If you are using Socket.IO v3, you need to explicitly enable Cross-Origin Resource Sharing (CORS).
const io = require("socket.io")(httpServer, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

httpServer.listen(3000);

Answer 2

It is 100% working.. I have spend 2 hours in it and at last find the answer . Just replace code with this...

const express = require("express")
var app = express();
var server = app.listen(4000);
var io = require('socket.io')(server, {
    cors: {
      origin: '*',
    }
});

Answer 3

If you are using HTTPS protocol, then try using the following snippet:

var http = require('https');

Answer 4

If you are facing the same kind of error where your access to the request has been blocked then change your code from..... const socket = io('http://localhost:8000'); to this const socket = io('http://localhost:8000',{transports: ['websocket']});

this will make your code to run

Answer 5

For multiple urls:

var io = require('socket.io')(server, {
    cors: {
      origin: ['url1','url2',..]
    }
});

Answer 6

You can try to use cors npm package. Install CORS using the following command:

npm install cors

Then at the top of your application file, import the installed CORS package as,

const cors = require('cors');

then use this constant variable as middleware,

app.use(cors());

and it will handle all the CORS related options and settings you need.

Note: You should use app.use(cors()); line before initiating your routers. Otherwise it may not work.

Answer 7

When I hosted on Heroku my nodejs app that uses socekt.io I got the same error in my browser. The problem was that I didnot add a start script in package.json file. So heroku could no way start my app. When I added the start script, then the problem was solved.