Nginx反向代理ASP.NET Core Blazor站点CSS加载失败求助

嘿，我明白你现在的困扰：想把/net路径代理到8080端口的Blazor应用，现在能看到页面但CSS加载不出来，之前用rewrite还会跳转URL不符合需求。我来给你分析下原因和解决办法。

问题根源 #

你的Blazor应用部署在8080的根目录下，它生成的页面里，静态资源（比如CSS、JS）的引用都是根路径（比如<link href="/css/site.css" rel="stylesheet" />）。当你通过http://leiyang.icu/net/访问时，浏览器会直接请求http://leiyang.icu/css/site.css——这个请求会被Nginx转发到它自己的默认HTML文档根目录，而不是代理到8080的Blazor应用，所以自然找不到资源，导致CSS加载失败。

两种解决方案 #

方案一：修改Blazor应用的基路径（推荐） #

让Blazor应用知道自己是在/net路径下运行，这样它生成的所有资源引用都会自动带上/net前缀，浏览器请求的路径就会匹配Nginx的代理规则。

针对Blazor Server（.NET 5）

在Program.cs里添加UsePathBase配置：

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStartup<Startup>();
            webBuilder.UsePathBase("/net"); // 添加这一行，设置应用的基路径
        });

针对Blazor WebAssembly（.NET 5）

修改wwwroot/index.html里的<base>标签：

<base href="/net/" />

修改后重新编译部署你的Blazor应用，再访问http://leiyang.icu/net/，应该就能正常加载CSS了。

方案二：调整Nginx配置（无需修改应用） #

如果不想改动应用代码，可以修改Nginx的配置，让所有以/net开头的请求都转发到8080，并且自动去掉/net前缀传递给后端应用。

替换你原来的location /net/配置为以下内容：

# 匹配所有以/net开头的路径
location ~ ^/net(/.*)?$ {
    # 把/net后面的路径原样转发到8080（比如/net/counter → http://localhost:8080/counter）
    proxy_pass http://localhost:8080$1;
    
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection keep-alive;
    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;

    # 处理Blazor单页应用的路由问题（刷新页面不会404）
    if (!-f $request_filename) {
        rewrite ^/net(/.*)?$ /net/index.html last;
    }
}

配置修改后，记得重启Nginx生效：

sudo systemctl restart nginx

然后清除浏览器缓存，再访问测试。

两种方案对比 #

• 方案一更规范，符合ASP.NET Core的部署最佳实践，后续维护更方便；
• 方案二更灵活，适合快速测试或者无法修改应用代码的场景。

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