ASP.NET与React演示项目无法加载网页求助

API 探路者

2026-6-20

ASP.NET Core + React 部署后404无法加载前端页面的排查方案

静态文件配置缺失
检查Program.cs中是否添加了app.UseStaticFiles();，且该代码需放在路由配置（如app.MapControllers()）之前。ASP.NET Core需要通过中间件提供React打包后的静态资源访问，缺少此配置会直接返回404。若部署在子路径下，需配置StaticFileOptions指定RequestPath，示例：
```
app.UseStaticFiles(new StaticFileOptions
{
    RequestPath = "/my-app"
});
```
SPA fallback路由未正确配置
React依赖客户端路由，ASP.NET Core需配置fallback规则，确保所有非API请求都指向index.html。确认代码中包含app.MapFallbackToFile("index.html");，且该代码需放在所有API路由配置之后。
若使用旧版本的MapSpaFallbackRoute，需确保HomeController的Index方法返回File("~/index.html", "text/html")，示例：
```
public IActionResult Index()
{
    return File("~/index.html", "text/html");
}
```
前端打包路径配置错误
检查React项目package.json中的homepage字段，若部署在子路径下，需设置为对应路径（如"/my-app/"），否则打包后的资源路径会指向根目录，导致加载失败。同时确认已执行npm run build，且打包后的build文件夹内容已正确复制到ASP.NET Core的wwwroot目录下。
服务器目录权限问题
确保服务器上的静态文件目录（如wwwroot）具备读取权限：IIS部署时，检查应用程序池身份是否拥有该目录的访问权限；Docker部署时，确认容器内的路径映射正确，且容器用户具备读取权限。
路由冲突
检查ASP.NET Core的API路由是否与React客户端路由重叠（如API路由/dashboard与React路由/dashboard冲突）。建议给API路由统一添加前缀（如/api），避免优先匹配API路由导致前端页面404。