Blazor应用非简单路径下资源加载失败问题求助

核心原因 #

问题出在资源引用的相对路径解析逻辑上：当访问/counter/test这类深层路径或错误路径时，浏览器会把当前路径作为基准，尝试从/counter/css/而非根目录/css/加载资源，导致404。错误的API路径如果触发Blazor的NotFound页面，也会因为同样的路径解析问题导致样式错乱。

具体解决步骤 #

1. 把所有资源引用改为绝对路径 #

修改wwwroot/index.html里的CSS、JS、框架资源引用，在路径开头加上斜杠/，强制从网站根目录加载：

<!-- 原相对路径 -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="_framework/blazor.webassembly.js"></script>

<!-- 修改为绝对路径 -->
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<script src="/_framework/blazor.webassembly.js"></script>

2. 配置服务器端路由Fallback（针对Blazor WebAssembly/Hosted） #

在Program.cs中，确保所有非API的路径都返回根目录的index.html，让Blazor能正确初始化：

// 先配置API路由（如果有）
app.MapControllers();

// 配置Blazor路由Fallback，处理所有非API的路径
app.MapFallbackToFile("index.html");

3. 区分API与Blazor路由，避免API错误触发Blazor页面 #

如果应用包含API接口，要确保API的错误路径直接返回API格式的404，而非Blazor页面。通过先注册API路由、再配置Blazor Fallback的方式，让服务器优先处理API请求：

// 先映射所有API控制器
app.MapControllers();

// 仅对非API路径返回Blazor的index.html
app.MapFallbackToFile("index.html");

这样像/api/path_with_typo这类错误的API路径，会返回API的404响应，不会加载Blazor页面，也就不会出现资源路径问题。

4. 检查Swagger UI的资源引用 #

集成Swagger时，确保Swagger的资源引用路径正确。如果是通过app.UseSwaggerUI()配置的，默认路径已经是绝对路径；若有自定义的Swagger资源引用，同样要改成绝对路径格式。

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