Azure App Service配置web.config处理Angular路由刷新问题

能否通过Azure门户修改web.config？ #

可以，直接通过Kudu工具操作：

• 登录Azure门户，进入你的目标App Service
• 左侧菜单选择高级工具，点击Go进入Kudu管理界面
• 切换到Debug console下的CMD或PowerShell
• 导航到site/wwwroot目录（应用发布后的根目录）
• 若已有web.config，点击编辑按钮修改内容；若没有，新建该文件并添加所需的重写规则后保存

其他可行解决方案 #

方案一：通过.NET Core项目配置SPA路由（推荐） #

因为你的项目是Angular与.NET Core API混合部署，直接在.NET Core代码中配置SPA路由规则，无需手动维护web.config：
针对.NET 6+版本，在Program.cs中添加以下配置：

var builder = WebApplication.CreateBuilder(args);

// 注册SPA静态文件服务
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/dist"; // 对应Angular构建后的输出目录，根据你的项目结构调整
});

var app = builder.Build();

// 启用静态文件服务
app.UseStaticFiles();
if (!app.Environment.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

// 配置SPA路由回退，处理页面刷新
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    // 开发环境下使用Angular CLI服务器
    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

部署后，.NET Core会自动生成包含正确路由规则的web.config，彻底解决页面刷新404问题。

方案二：正确在Angular项目中添加web.config #

如果坚持手动添加web.config到Angular项目，需确保构建时能正确打包该文件：

1. 将web.config放在Angular项目的src目录下
2. 修改angular.json，在assets数组中添加web.config，确保构建时复制到dist目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config"
]

3. web.config中添加路由重写规则：

<?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" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

完成以上配置后重新构建并发布Angular应用，即可避免发布失败问题。

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