Angular托管于ASP.NET Core(IIS)时浏览器无法访问后端API问题

这问题跟Angular路由没关系——毕竟HttpClient能正常调用API，说明服务端接口本身没问题。浏览器直接访问www.example.com/api/foo被重定向，核心原因是请求被ASP.NET Core的SPA fallback逻辑或者IIS重写规则拦截，被当成了Angular客户端路由请求，返回了Angular的index.html，最终触发Angular路由重定向到首页。

1. 调整ASP.NET Core中间件顺序 #

在Program.cs里，必须保证API路由中间件优先于静态文件、SPA中间件执行，让API请求先被服务端路由处理。正确的配置顺序如下：

var builder = WebApplication.CreateBuilder(args);

// 注册服务
builder.Services.AddControllers();
builder.Services.AddSpaStaticFiles(config =>
{
    config.RootPath = "ClientApp/dist"; // 替换成你的Angular编译输出路径
});

var app = builder.Build();

// 中间件执行顺序非常关键
app.UseHttpsRedirection();

// 第一步：先处理API路由
app.MapControllers();

// 第二步：处理静态文件（Angular编译后的资源）
app.UseStaticFiles();
app.UseSpaStaticFiles();

// 第三步：最后处理SPA fallback，仅当请求不是API、不是静态文件时，才返回Angular的index.html
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

如果把MapControllers()放在UseSpa()之后，所有请求都会先被SPA fallback拦截，直接返回index.html，自然会触发Angular的路由重定向。

2. 修正IIS URL重写规则 #

如果部署在IIS上，检查web.config里的重写规则，必须排除/api开头的路径，让IIS直接把API请求转发给ASP.NET Core：

<rewrite>
  <rules>
    <rule name="Angular Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <!-- 排除API路径，不进行重写 -->
        <add input="{REQUEST_URI}" pattern="^/api/" negate="true" />
        <!-- 排除静态文件和目录 -->
        <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>

这个规则会让IIS直接处理/api开头的请求，不会重写到index.html，确保ASP.NET Core能正确路由到API控制器。

3. 验证API控制器路由配置 #

确认你的API控制器路由属性配置正确，比如：

[ApiController]
[Route("api/[controller]")]
public class FooController : ControllerBase
{
    [HttpGet]
    public IActionResult GetFoo()
    {
        return Ok("API响应内容");
    }
}

这样www.example.com/api/foo就能正确匹配到FooController的GetFoo方法。

核心逻辑是让API请求优先被服务端路由处理，避免被SPA的fallback逻辑拦截。调整中间件顺序和IIS重写规则后，浏览器直接访问API就能正常返回数据，不会触发Angular的路由重定向。

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