[SOLVED] websocket issue on blazor with CentOS and Nginx

Issue

I am triying to deploy my blazor app (server side) into my VPS with CentOS.

And the deployment went fine, i can access my website, but in the console i see the following errors:

blazor.server.js:1 WebSocket connection to 'wss://website.com/_blazor?id=bMDvWwyNa5R5y9KsTVUS6A' failed: 
(anonymous) @ blazor.server.js:1
blazor.server.js:1 [2021-05-01T07:33:36.170Z] Error: Failed to start the transport 'WebSockets': Error: There was an error with the transport.
e.log @ blazor.server.js:1
/_blazor?id=l_DDVIXzIu1Ro3zd9stUsA&_=1619854490093:1 Failed to load resource: the server responded with a status of 504 ()
blazor.server.js:1 [2021-05-01T07:35:50.195Z] Error: Connection disconnected with error 'Error'.

and I have no idea how to deal with them.

As i understand, the websocket/signalR is not being open, which means that once the website is loaded the connection is "cut" the problem here is that blazor does that call every minute, so i get a message saying attempting to reconnect to the server and it does it. but the website is unusable for 5-secods ish.

In order to fix this i tried multiple solutions I saw online:

in the project: set up services.AddSignalR() and app.UseWebSockets() and it didnt work.

I thought as well that it could be nginx (and probably is) then i found this: https://www.nginx.com/blog/websocket-nginx/ and https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server?view=aspnetcore-5.0#linux-with-nginx

but it seems not to be working:

map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

server {
    server_name website.com;

    location / {
        proxy_pass         http://localhost:5201;
        proxy_http_version 1.1; # added from ms documentation
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection $http_upgrade;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

    listen 443 http2 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

EDIT: I have this as well in the nginx file

server{
if ($host = website.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    server_name website.com ;
    listen 80 ;
    return 404;
}

EDIT2: I am runnning the version 1.20 on nginx

Any idea which part of the connection can be wrong?

Thanks.

Solution

Found the issue, in the line of proxy_set_header Connection $http_upgrade;

Change it for: proxy_set_header Connection "upgrade";

Not sure why it works when hardcoding the value, but it does.

Answered By - TiGreX

Answer Checked By - David Marino (WPSolving Volunteer)