在NGINX上托管独立Blazor WASM的问题求助

问题1：刷新Blazor路由页面出现404 #

Blazor WASM是单页应用（SPA），前端路由由浏览器处理，刷新时NGINX会尝试查找对应物理路径的文件，找不到就会返回404。需要修改NGINX配置，将所有匹配Blazor路由的请求重定向到index.html，让Blazor接管路由处理。

NGINX配置调整（整合到子路径配置前的临时修复） #

在server块中添加规则：

location / {
    try_files $uri $uri/ /index.html;
}

该规则优先查找存在的静态文件，找不到则转发到index.html。

问题2：将Blazor部署到/Blazor子路径 #

需要同时修改Blazor项目配置和NGINX配置：

1. 修改Blazor项目的基础路径 #

• 打开Blazor项目wwwroot/index.html，找到<base href="/" />，修改为：

<base href="/Blazor/" />

• 若使用.NET CLI发布，可直接通过参数指定：

dotnet publish -c Release /p:BasePath=/Blazor/

2. 调整NGINX配置 #

在server块中配置专门的location处理/Blazor路径：

location /Blazor {
    root /path/to/your/blazor/dist; # 替换为Blazor发布后的静态文件目录
    try_files $uri $uri/ /Blazor/index.html;
}

# 保留原有服务代理配置，例如：
location /serverX {
    proxy_pass http://your-service-address;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

• root指向Blazor发布后的静态文件根目录（如bin/Release/net8.0/publish/wwwroot）
• try_files规则确保/Blazor下的所有路由请求都转发到/Blazor/index.html，同时解决刷新404问题

完整NGINX配置示例 #

server {
    listen 80;
    server_name your-server-ip;

    # Blazor子路径部署配置
    location /Blazor {
        root /var/www/blazor-wasm; # 替换为实际发布目录
        try_files $uri $uri/ /Blazor/index.html;
    }

    # 其他服务代理配置示例
    location /server1 {
        proxy_pass http://localhost:5001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /server2 {
        proxy_pass http://localhost:5002;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

验证步骤 #

1. 重新发布Blazor项目，确保base href配置正确
2. 更新NGINX配置后执行nginx -s reload使配置生效
3. 访问http://{server-ip}/Blazor，测试页面内导航和刷新，确认无404错误
4. 验证/serverX的服务代理是否正常工作

内容的提问来源于stack exchange，提问作者R.Haughton