Ubuntu+Nginx部署.NET7 Blazor Server遇Chrome WebSocket连接失败问题

环境与问题 #

在Ubuntu Server 22.04 LTS VPS上使用Nginx/1.18.0托管.NET 7 Blazor Server应用，应用在Firefox及移动端Safari中运行正常，但桌面与移动端Chrome中出现WebSocket连接失败，报错如下：

WebSocket connection to 'wss://website.com/_blazor?id=mNSKPSW6ZpgU-tT9g-YPLw' failed: 
(anonymous) @ blazor.server.js:1
connect @ blazor.server.js:1
_startTransport @ blazor.server.js:1
_createTransport @ blazor.server.js:1
_startInternal @ blazor.server.js:1
blazor.server.js:1 [2023-11-20T12:03:14.398Z] Information: (WebSockets transport) There was an error with the transport.
blazor.server.js:1 [2023-11-20T12:03:14.398Z] Error: Failed to start the transport 'WebSockets': Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.

已尝试官方部署指南但问题未解决，当前配置如下：

Program.cs代码 #

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var app = builder.Build();

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();

    app.UseHttpsRedirection();
}

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

Nginx配置 #

server {
 server_name   website.com *.website.com;
 location / {
 proxy_pass http://localhost:5000;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection keep-alive;
 proxy_set_header Connection "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 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

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


 listen 80;
 server_name   website.com *.website.com;
    return 404; # managed by Certbot
}

解决方案 #

1. 修复Nginx的Connection头配置 #

你的Nginx配置中重复设置了Connection头，这会导致Chrome无法正确识别WebSocket升级请求。修改方法：

在所有server块之前添加如下map配置：

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

然后将location块中的两行Connection设置替换为：

proxy_set_header Connection $connection_upgrade;

修改后的location块部分：

location / {
 proxy_pass http://localhost:5000;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection $connection_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;
}

2. 完善ForwardedHeaders配置 #

在Program.cs中，添加允许转发的主机，避免ASP.NET Core拒绝来自Nginx的请求：

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto,
    // 生产环境建议指定具体域名，避免安全风险
    AllowedHosts = { "website.com", "*.website.com" }
});

3. 检查SSL配置是否限制WebSocket #

打开/etc/letsencrypt/options-ssl-nginx.conf，确认没有禁用TLS 1.2或1.3（WebSocket依赖这些协议），确保包含以下内容：

ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers off;

4. 重启服务 #

修改配置后，重启Nginx和Blazor应用：

sudo systemctl restart nginx
# 替换为你的Blazor应用服务名
sudo systemctl restart your-blazor-service-name

内容的提问来源于stack exchange，提问作者feonao