Why do I keep getting 404 error for Socket.io polling requests?

Viewed 1735

Getting quite a few of these spawning from my React app: GET http://exampleenvv2-env.eba-yjtafbmz.us-east-1.elasticbeanstalk.com/socket.io/?EIO=3&transport=polling&t=NLE1Pn5

My React sits on port 8080 and Express on 5000, both behind Nginx on AWS Beanstalk. From SSH'ing into the instance, it appears both are running fine, and since I can access the React app in browser fine, it looks like it properly routes to that server.

I was able to get a basic chat app working locally between two browser windows.

I do this in my React page.js:

import socketIOClient from "socket.io-client";
var io = require('socket.io');
var socket = socketIOClient();

Server.js (for Express/Socket.io listening):

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const router = express.Router();

var Immutable = require('immutable');
var SortedSet = require("collections/sorted-set");

var Map = Immutable.Map;
var List = Immutable.List;

var hostname = process.env.IP || 'localhost';
var port = 5000;

var games = Map();
var players = Map();
var availableKeys = SortedSet();
var maxKey = 0;

/.../

http.listen(port, hostname, function () {
console.log("Server is listening on http://" + hostname + ":" + port);
});

Nginx location config portion:

location / {
  proxy_http_version  1.1;
  proxy_pass          http://127.0.0.1:8080/;
  proxy_set_header    Host $host;
  proxy_set_header    X-Real-IP $remote_addr;
  proxy_set_header    Connection $connection_upgrade;
  proxy_set_header    Upgrade $http_upgrade;
  proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /socket.io {
  proxy_pass                http://127.0.0.1:5000/;
  proxy_set_header          Host $host;
  proxy_set_header          X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header          X-NginX-Proxy true;
  proxy_set_header          X-Real-IP $remote_addr;
  proxy_ssl_session_reuse   off;
  proxy_cache_bypass        $http_upgrade;
}

I've tried using the path option to '/socket.io' for node and react, that didn't seem to help.

Here's an example of the error.log:

2020/10/22 01:36:44 [error] 20352#0: *279 connect() failed (111: Connection refused) while connecting
to upstream, client: 172.31.22.103, server: , request: "GET /socket.io/
EIO=3&transport=polling&t=NLDyuCl HTTP/1.1", upstream: "http://127.0.0.1:5000//? 
EIO=3&transport=polling&t=NLDyuCl", host: "exampleenvv2-env.eba-yjtafbmz.us-east- 
1.elasticbeanstalk.com", referrer: "http://exampleenvv2-env.eba-yjtafbmz.us-east- 
1.elasticbeanstalk.com/"
2 Answers

It turns out the top-ranked answer here with the Nginx configuration was all I needed.

I ended up editing the path but also added a few other lines, but I really think the path was being finicky. Nginx is good about going from specific to general, but whether it needs to be an exact match or closest-related is up to the user.

location ~* \.io {
  proxy_pass                http://127.0.0.1:5000;
  proxy_set_header          Host $http_host;
  proxy_set_header          X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header          X-NginX-Proxy false;
  proxy_set_header          X-Real-IP $remote_addr;
  proxy_ssl_session_reuse   off;
  proxy_set_header          Upgrade $http_upgrade;
  proxy_set_header          Connection "upgrade";
  proxy_redirect            off;
  proxy_http_version        1.1;
}

Thank you to the other answers which are other good steps for troubleshooting this setup!

I'm no nginx expert, but is it possible that nginx is routing your socket request to your react app? The location path / may be matching all requests and routing all traffic to the react app. Try either getting rid of nginx as @Biswa has already commented, or try making a more specific path for your react app e.g. /ui and see if the the socket requests actually get routed to the correct process.

Related