Angular+ASP.NET Core Azure部署页面刷新/更新按钮触发404错误求助

这是单页应用（SPA）部署后常见的路由问题——当你刷新页面或直接访问非根路由时，服务器会尝试寻找对应的物理文件，而Angular的路由是客户端路由，服务器没有对应的资源，所以返回404。以下是针对性的解决方法：

1. 在ASP.NET Core中配置SPA回退路由 #

在Program.cs里调整中间件顺序，确保所有非API请求都转发到Angular的index.html：

var builder = WebApplication.CreateBuilder(args);

// 添加服务（比如Controllers、SPA服务等）
builder.Services.AddControllersWithViews();
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist"; // 这里是Angular构建后的静态文件目录，根据你的实际路径调整
});

var app = builder.Build();

// 中间件配置顺序很重要
app.UseHttpsRedirection();
app.UseStaticFiles();
if (!app.Environment.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

app.UseRouting();

app.UseAuthorization();

app.MapControllers();

// 配置SPA回退路由，所有非API请求都指向index.html
app.MapFallbackToFile("index.html");

// 或者如果使用SpaServices扩展包，也可以用：
// app.MapSpaFallbackRoute(
//     name: "spa-fallback",
//     defaults: new { controller = "Home", action = "Index" });

app.Run();

注意：确保UseStaticFiles()在路由配置之前，且SPA静态文件目录指向正确的Angular构建输出路径。

2. 添加IIS重写规则（针对Azure App Service） #

Azure App Service默认用IIS托管，需要在wwwroot目录下添加web.config文件，配置URL重写规则，让服务器把客户端路由请求转发到index.html：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> <!-- 排除API路由 -->
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <defaultDocument>
      <files>
        <add value="index.html" /> <!-- 设置默认文档 -->
      </files>
    </defaultDocument>
  </system.webServer>
</configuration>

3. 确认Angular构建的base-href配置 #

构建Angular生产包时，要指定正确的base href，确保路由路径正确：

# 如果部署在Azure App Service根路径
ng build --prod --base-href /

# 如果部署在子路径（比如https://yourapp.azurewebsites.net/myapp）
ng build --prod --base-href /myapp/

构建完成后，将dist目录下的所有文件复制到ASP.NET Core项目的wwwroot目录（或配置的SPA静态文件目录）中。

4. 检查Azure App Service的基础配置 #

• 在Azure门户中进入你的App Service，找到“配置”→“常规设置”，确保“静态文件”选项已启用。
• 进入“配置”→“默认文档”，确认index.html在默认文档列表的顶部。

完成以上步骤后，重新部署应用，刷新页面或点击Update按钮应该就不会出现404错误了。

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