ASP.NET Web Api（.NET7）与Angular前端代理请求失败求助

按照微软官方教程搭建ASP.NET Web API（.NET7，原教程为.NET6）与Angular前端项目，首次运行时出现以下错误：

<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/weatherforecast to https://localhost:5290/ [EPROTO] (https://nodejs.org/api/errors.html#errors_common_system_errors)

已确认后端API已运行，刷新浏览器后错误仍存在。

相关配置文件 #

launchSettings.json #

{   
    "profiles": {
        "http": {
          "commandName": "Project",
          "launchUrl": "swagger",
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          },
          "dotnetRunMessages": true,
          "applicationUrl": "http://localhost:5290"
        },
        "https": {
          "commandName": "Project",
          "launchUrl": "swagger",
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          },
          "dotnetRunMessages": true,
          "applicationUrl": "https://localhost:7294;http://localhost:5290"
        },
        "IIS Express": {
          "commandName": "IISExpress",
          "launchBrowser": true,
          "launchUrl": "swagger",
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          }
        }   
    },   
    "$schema": "https://json.schemastore.org/launchsettings.json",   
    "iisSettings": {
        "windowsAuthentication": false,
        "anonymousAuthentication": true,
        "iisExpress": {
          "applicationUrl": "http://localhost:32492",
          "sslPort": 44306
        }   
    } 
}

Proxy.conf.js #

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
    ],
    target: "https://localhost:5290",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

解决方案 #

• 修正代理目标地址：Proxy.conf.js中target配置为https://localhost:5290，但从launchSettings.json可知，5290是HTTP端口，HTTPS端口为7294。需将target改为http://localhost:5290（对应后端HTTP启动）或https://localhost:7294（对应后端HTTPS启动），确保协议和端口与后端实际运行地址一致。
• 确认后端运行端口：启动后端后，查看控制台输出的Now listening on:地址，确保代理配置的地址完全匹配。
• 清除Angular缓存：执行ng cache clean命令清除缓存，然后重启Angular开发服务。
• 切换HTTP代理测试：若HTTPS代理仍有问题，暂时改用HTTP代理（后端启动HTTP端口，代理target设为http地址），排除SSL证书相关干扰。

新版教程推荐 #

微软官方已更新ASP.NET Core与Angular整合教程至.NET 8版本，涵盖Visual Studio模板创建、手动搭建前后端分离项目的完整步骤，内容适配最新框架版本，可直接在微软文档平台搜索“ASP.NET Core with Angular”获取。

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