SocketIO Failed to load resource the server responded with a status of 400

2018/08/19 08:37:09 Failed to load resource the server responded with a status of 400 (socketio)
2018/08/19 08:37:09 Failed to load resource the server responded with a status of 400 (socketio)
2018/08/19 08:37:09 Failed to load resource the server responded with a status of 400 (socketio)
2018/08/19 08:37:09 Failed to load resource the server responded with a status of 400 (socketio)
400 Bad Request Error Socketio (browser console)

When it started happening for me?

This started happening to me when i had Nodebb Running on a server behind Nginx as a reverse proxy in multiple processes. Funny enough it worked okay with conventional setup where nodebb was running in one port and process. Ultimately following Nginx config file helped me resolve the issue.

upstream io_nodes {
    ip_hash;
    server 127.0.0.1:4567;
    server 127.0.0.1:4569;
}


server {
    listen                  80;
    server_name             craftypixels.com www.craftypixels.com;
    return                  301 $scheme://craftypixels.com$request_uri;
}
server {

    listen 443 ssl;

    ssl on;
    ssl_certificate         filepath
    ssl_certificate_key     filepath

    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security "max-age=31536000; includeSubdomains";

    server_name craftypixels.com www.craftypixels.com;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_redirect off;

    # Socket.io Support
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    gzip            on;
    gzip_min_length 1000;
    gzip_proxied    off;
    gzip_types      text/plain application/xml text/javascript application/javascript application/x-javascript text/css application/json;


    location @nodebb {
        proxy_pass http://io_nodes;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

    location ~ ^/assets/(.*) {
        root /var/www/nodebb/;
        try_files /build/public/$1 /public/$1 @nodebb;
    }

    location /plugins/ {
        root /var/www/nodebb/build/public/;
        try_files $uri @nodebb;
    }

    location / {
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://io_nodes;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

}
Nginx vhost file for nodebb running on multiple ports

Background of 400 Bad Request Error

The 400 Bad Request Error is an HTTP response status code that indicates that the server was unable to process the request sent by the client due to invalid syntax. As with the dozens of potential HTTP response codes, receiving a 400 Bad Request Error while accessing your own application can be both frustrating and challenging to fix. Such HTTP response codes represent the complex relationship between the client, a web application, a web server, and often multiple third-party web services, so determining the cause of a particular status code can be a difficult, even within a controlled development environment.