VS2019中ASP.NET Core+Angular模板Fetch data页面加载卡住求助

DevOps 小满

2026-10-4

解决步骤

确认双服务同时启动
VS2019生成的ASP.NET Core+Angular模板默认需要同时运行后端API服务和前端Angular开发服务，如果你只单独执行ng serve启动了前端，后端接口没有运行，自然无法拉取到数据。正确操作是直接在VS中点击「启动调试」按钮，VS会自动同时启动两个服务。
核对代理配置是否生效
你创建的proxy.conf.json需要满足两个条件才能生效：
1. 配置中的目标端口和ASP.NET Core后端的实际启动端口一致，参考配置如下：
```
{
  "/weatherforecast": {
    "target": "https://localhost:你的后端实际端口",
    "secure": false,
    "changeOrigin": true
  }
}
```
1. 在angular.json中关联代理配置，找到projects -> 你的项目名 -> architect -> serve -> options节点，添加"proxyConfig": "proxy.conf.json"配置，保存后重启前端服务才会生效。

配置后端CORS规则（非代理场景适用）
如果不想用前端代理，可以直接在ASP.NET Core项目中添加CORS中间件放行前端请求：

// .NET 6及以上版本在Program.cs中添加
// 服务注册部分添加
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularDev", policy =>
    {
        policy.WithOrigins("http://localhost:4200")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// 中间件配置部分，放在UseRouting和UseAuthorization之间
app.UseCors("AllowAngularDev");

如果是.NET 5及更低版本，把上述对应逻辑放到Startup.cs的ConfigureServices和Configure方法中即可。