Azure同一Web App部署Angular与.NET8后前端无法访问排查

一、修正web.config配置 #

问题核心是web.config未同时正确处理Angular静态文件和.NET后端请求，以下是适配根目录部署的完整配置：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      <!-- 按需添加其他静态文件MIME类型 -->
    </staticContent>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\YourProjectName.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
    <rewrite>
      <rules>
        <!-- 优先转发API请求到.NET后端 -->
        <rule name="API Routes" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="{R:0}" />
        </rule>
        <!-- 放行Swagger路径 -->
        <rule name="Swagger Routes" stopProcessing="true">
          <match url="^swagger/(.*)" />
          <action type="Rewrite" url="{R:0}" />
        </rule>
        <!-- 其他非文件/目录请求转发到Angular入口页 -->
        <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="index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

关键注意点：

• 替换YourProjectName.dll为实际项目的DLL文件名
• 重写规则优先级：API > Swagger > Angular路由，避免后端请求被前端拦截
• 静态文件MIME类型覆盖Angular常用资源（JSON、字体等）

二、调整Program.cs中间件顺序 #

确保中间件加载顺序正确，静态文件处理需放在路由之前，同时添加SPA支持：

var builder = WebApplication.CreateBuilder(args);

// 注册服务（数据库、Swagger等）
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// 配置SPA静态文件路径（对应Angular构建产物目录）
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "wwwroot"; // 若Angular产物直接放根目录，改为""
});

var app = builder.Build();

// 开发环境启用Swagger
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

// 先启用静态文件和SPA静态文件
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseAuthorization();

// 映射API路由
app.MapControllers();

// 配置SPA入口
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "wwwroot"; // 和上方RootPath保持一致
    // 生产环境无需启动Angular CLI服务器
    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

app.Run();

三、Azure Web App配置检查 #

1. 应用设置：确认ASPNETCORE_ENVIRONMENT设为Production，避免开发环境配置干扰
2. 文件结构验证：通过Azure门户「高级工具>控制台」检查根目录，确保Angular的index.html、资源文件和.NET的DLL在同一层级
3. 启动命令：若web.config配置正确，无需额外设置；若有启动问题，可在应用设置中添加WEBSITE_STARTUP_COMMAND为dotnet YourProjectName.dll
4. 静态文件开关：在「配置>常规设置」中确认「静态文件」选项为开启状态

四、验证步骤 #

1. 访问https://your-app-name.azurewebsites.net/swagger，确认后端API正常响应
2. 访问根路径https://your-app-name.azurewebsites.net，确认Angular首页加载正常
3. 测试前端路由（如/dashboard），确认不会返回404
4. 测试API接口（如/api/users），确认数据返回正常

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