Angular15+ASP.NET Core6部署IIS10刷新路由回退index.html问题

问题根源 #

刷新深层路由（如/category/details/1）时出现的两类问题本质是：

1. 初始404错误：IIS无法识别Angular前端路由，直接返回资源不存在提示
2. 后续MIME类型错误：URL重写规则未排除静态资源，导致JS模块文件被IIS返回text/html类型，违反浏览器MIME类型校验规则

解决方案 #

1. 修正IIS重写规则（web.config） #

在Angular dist目录（或ASP.NET Core项目的wwwroot/dist下）创建/修改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" />
            <!-- 排除API路由（如果项目包含后端API） -->
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <!-- 强制指定JS文件MIME类型，避免IIS识别错误 -->
    <staticContent>
      <remove fileExtension=".js" />
      <mimeMap fileExtension=".js" mimeType="text/javascript; charset=utf-8" />
      <remove fileExtension=".mjs" />
      <mimeMap fileExtension=".mjs" mimeType="text/javascript; charset=utf-8" />
    </staticContent>
  </system.webServer>
</configuration>

2. 调整ASP.NET Core中间件顺序（Program.cs） #

确保静态文件中间件优先于路由和回退中间件，保证静态资源能被正确返回：

var builder = WebApplication.CreateBuilder(args);

// 添加必要服务
builder.Services.AddControllersWithViews();
// 配置SPA静态文件路径（指向Angular编译后的dist目录）
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "wwwroot/dist";
});

var app = builder.Build();

// 环境配置
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
// 优先启用静态文件服务
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseRouting();
app.UseAuthorization();

// 后端API路由
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

// 前端路由回退：所有非API、非静态文件的请求导向index.html
app.MapFallbackToFile("index.html");

app.Run();

3. 确认Angular路由配置（AppModule） #

保持使用PathLocationStrategy，确保已移除HashLocationStrategy相关配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule { }

验证步骤 #

1. 重新编译Angular项目：ng build --configuration production
2. 将dist目录内容复制到ASP.NET Core项目的wwwroot/dist下
3. 重新部署到Azure IIS
4. 刷新深层路由页面，检查页面是否正常加载，浏览器控制台无MIME类型错误

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