如何在Angular与ASP.NET Core项目中添加新API？

1. 检查后端控制器的路由配置 #

确保新添加的控制器正确标记[ApiController]并配置路由，推荐统一使用api前缀，避免和Angular路由冲突：

[ApiController]
[Route("api/[controller]")]
public class FooController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        return Ok(new { Message = "Foo API works" });
    }
}

2. 更新Angular代理配置 #

打开Angular项目根目录下的proxy.conf.js，默认配置仅转发/weatherforecast/**的请求，需修改为匹配所有API路径（如/api/**），或添加新的API路径：

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:27529';

const PROXY_CONFIG = [
  {
    context: [
      "/api/**", // 匹配所有api前缀的请求，替代原有的单一路径规则
   ],
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  }
]

module.exports = PROXY_CONFIG;

修改后重启Angular开发服务器。

3. 确认ASP.NET Core的路由顺序 #

在Program.cs中，确保app.MapControllers()的调用顺序在app.UseStaticFiles()和app.MapFallbackToFile("index.html")之前，让API路由优先被处理，不会触发Angular的fallback逻辑：

var app = builder.Build();

// 其他中间件配置...

// 先映射API控制器
app.MapControllers();

// 再处理Angular静态资源
app.UseStaticFiles();

// 最后配置单页应用fallback路由
app.MapFallbackToFile("index.html");

app.Run();

测试新API #

现在访问https://localhost:4200/api/foo，即可正常获取JSON响应。

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