Nginx not working with Node.js + Socket.io

Question

I have been trying all day to get my Nginx/React applications to connect to my Node.js backend which works fine in my development environment. My frontend and backend are deployed in their own Docker containers on the same VM. The Nginx container can communicate directly with the Node.js container, and it's confirmed working because other get/post requests work fine.

Here is was my initial Nginx configuration.

server {
  listen 80;

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  //This is the initial route to connect to socket.io
  location /api/notices {
    proxy_pass http://nodejs:8000;
  }

  location ~ ^/api/infoblock/[0-9a-zA-Z]+$ {
    proxy_pass http://nodejs:8000;
  }
}

This was the error I was getting in my console:

POST http://domain_name/socket.io/?EIO=3&transport=polling&t=MVFZtgP 405 (Not Allowed)

I did some more researching online, and was told to add something like this as well:

location /socket.io/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Host $host;

    proxy_pass http://nodejs:8000;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
   }

When I did this, the 405 error went away, but it seems like nothing is actually happening. I'm not getting any data from the socket.io connection and nothing is being thrown in the console.

I'm not sure what I need to do. I've tried so many "solutions" I found online, and cant seem to figure out why the socket.io connection won't work, but normal get/post requests will.

Here's how I'm connecting from the frontend, and again this is confirmed working in my development environment.

let socket = socketIOClient("/api/notices");
socket.on("NoticesReact", this._socketNotices);

How do I fix my nginx configuration to work with Node.js + Socket.io

Answer 1

After many hours of trying to figure this out. I got it, however, I'm not sure why.

This wasn't originally posted, but this is what my backend socket.io code looked like:

io.of("/api/notices").on("connection", socket => {...})

After trying just about everything I decided to remove my custom namespace, .of("/api/notices") which was a way to restrict the socket to a namespace. This worked in development, and it documented here on socket.io .

So now my Nginx configuration looks like this:

server {
  listen 80;

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /socket.io/ {
    proxy_pass http://nodejs:8000;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
   }

  location ~ ^/api/infoblock/[0-9a-zA-Z]+$ {
    proxy_pass http://nodejs:8000;
  }
}

And magically... everything works? But I have not a clue why removing my custom namespace was the solution to making it work with Nginx.

If someone can figure out why removing the custom namespace worked, please feel free to comment on this.