Getting CORS error while using socket.io / nginx / node

Question

I'm getting this error log from chrome's console

XMLHttpRequest cannot load https://subgroup.domain.com/socket.io/?EIO=3&transport=polling&t=Lpgp_mu. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.

I am using Node.js, socket.io to talk between my node and react.js, with a digitalocean's droplet using nginx to host them.

I've been reading a lot about CORS errors and I am unsure where to fix the error. I've been trying to allow them in my NGINX

location /server { 
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

And from my node.js, server side:

var express = require("express");
var app = express();
var http = require("http");
var port = 8080;
var io = require("socket.io").listen(app.listen(port));

app.use("/", function (req, res, next) {
    res.status(200).send("Online   |" + "   Version : [" + AppVersion + "]");
    res.setHeader("Access-Control-Allow-Origin","*");
    res.setHeader("Access-Control-Allow-Headers","X-Requested-With,content-type");
    res.setHeader("Access-Control-Allow-Methods","GET,POST, OPTIONS, PUT, PATCH, DELETE");
    next();});

And I connect on the client side using:

const socket = io.connect("https://subgroup.domain.com/server")

I am not really sure where and what I should look for. Any kind of help would help. Thanks!

Spiros

Stuck with the same issue. Did you find any solutions please? – Henceforth

@DipinKrishnan I am sooo sorry for the late answer! But yeah I found one by specifying one URL instead of the wildstar *. e.g. res.setHeader('Access-Control-Allow-Origin', 'subdomain.domain.com'); – Spiros

Answer 1

After a long research and executing multiple tests I got this working. Here is what I did,

NodeJS

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

io.on('connection', (socket) => {
  console.log('A user connected!');
  io.emit('welcome', 'Hello there!');
});

server.listen(3001);
console.log('Socket server started on port 3001');

Nginx

upstream websocket1 {
    server 127.0.0.1:3001;
}

server {

    listen 80;
    listen [::]:80;

    root /var/www/html;

    server_name mydomain.com

    location /ws/ {
        proxy_pass http://websocket1/socket.io/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Finally on the client side

const socket = io.connect('http://yourdomain.com/', {path: '/ws/'})

Here is a screenshot from Chrome console.

Please do not ignore the / after specifying the location in Nginx, it must be /ws/ it is not working otherwise. Currently I have a node balancer added to this socket service with Nginx.

Cheers!

Henceforth

I code the same, but the client throws errors CORS. – Spinel

@Spinel for socket.io v3 use this method socket.io/docs/v3/handling-cors – Charleton

Answer 2

In your second picture, the socket.io lib is using polling. This may come because you didn't set the nginx config properly.

location /socket.io/ {
    proxy_pass http://localhost:5003/socket.io/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

Here is a good example.After changing this you should be able to reach your backend just using the following:

import { io } from 'socket.io-client'
const socket = io()

Notice that if all your request go through the Nginx, you don't need the CORS directives as all your request will be going to the same address and port.

Ogg