Angular与ASP.NET Core新控制器API请求端口异常问题求助

1. 排查ASP.NET Core后端路由配置 #

• 确认DemoController的路由属性与WeatherForecastController完全一致：
  必须包含[ApiController]和[Route("[controller]")]属性，示例代码如下：

  [ApiController]
  [Route("[controller]")]
  public class DemoController : ControllerBase
  {
      [HttpGet]
      public IEnumerable<User> Get()
      {
          // 业务逻辑代码
      }
  }
  

• 先直接验证后端接口可用性：在浏览器/Postman中访问https://localhost:7188/demo，确认能正常返回数据。如果此处失败，优先排查后端代码（比如Action是否标记[HttpGet]、有无权限拦截等）。

2. 修正Angular代理配置（核心解决点） #

Angular开发环境依赖代理转发将前端请求导向后端端口，默认配置可能仅包含/weatherforecast的转发规则，导致/demo请求直接走前端4200端口，无法找到资源。

• 找到项目根目录的proxy.conf.json（或proxy.config.js），修改为全局匹配后端接口的规则：

  {
    "/{*path}": {
      "target": "https://localhost:7188",
      "secure": false,
      "changeOrigin": true
    }
  }
  

  该配置会将所有前端发起的请求转发到后端7188端口。
• 确认package.json的启动脚本已指定代理配置：

  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",
    // 其他脚本...
  }
  

• 修改配置后，重启Angular开发服务器，再测试http.get<User[]>('/demo')。

3. 备选：检查后端CORS配置（若代理仍不生效） #

如果代理配置无误但请求仍失败，需确保后端允许前端4200端口的跨域请求：
在ASP.NET Core的Program.cs中添加并启用CORS策略：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", policy =>
    {
        policy.WithOrigins("http://localhost:4200")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 在路由之后、授权之前启用CORS
app.UseCors("AllowAngular");

app.UseAuthorization();
app.MapControllers();

app.Run();

4. 校验请求路径准确性 #

确认Angular中的请求路径与后端路由完全匹配：比如若DemoController的Action添加了额外路由前缀（如[HttpGet("list")]），则请求路径应为/demo/list而非/demo。

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