Angular应用登录时报ERR_CONNECTION_REFUSED错误如何解决

核心配置错误点 #

• 代理规则未生效：你在environment.ts中配置了完整的绝对路径API地址http://localhost:8888/api/，Angular的本地代理仅对相对路径的接口请求生效，代码里直接拼接绝对路径发起请求时，浏览器会直接向目标地址发送请求，不会走本地4200的代理服务，自然不会匹配proxy.conf.json的转发规则。
• 代理端口不匹配：proxy.conf.json中配置的转发目标端口为8887，和你预期的后端API端口8888不一致，就算代理生效也会转发到错误端口。
• 启动参数遗漏：如果执行ng serve时没有添加--proxy-config proxy.conf.json参数，代理配置不会被加载，规则正确也不会生效。

你之前将所有端口统一改为4200依然报错，是因为4200端口运行的是Angular前端服务，本身没有处理后端API路由的逻辑，请求直接打到前端服务自然无法匹配接口。

修复步骤 #

1. 修改environment.ts中的API基础路径为相对路径：

// 调整前配置示例
export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8888/api/'
};

// 调整后配置
export const environment = {
  production: false,
  apiBaseUrl: '/api/'
};

2. 修正proxy.conf.json配置，将转发目标端口改为你MAMP环境中Slim3框架实际运行的端口，额外添加changeOrigin参数解决本地跨域问题：

{
    "/api": {
      "target": "http://localhost:8888", // 此处端口和后端实际运行端口保持一致
      "secure": false,
      "changeOrigin": true
    }
}

3. 调整启动命令，加载代理配置：
   执行启动命令时添加代理参数：
   ng serve --proxy-config proxy.conf.json
   也可以修改package.json中的scripts配置，简化启动操作：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",
  // 其余原有配置保持不变
}

修改后直接执行npm start即可自动加载代理配置启动项目。
4. 确认后端服务状态：检查MAMP中对应站点的运行端口是否和proxy.conf.json的target端口一致，Slim3框架的路由是否正确匹配/api/auth的POST请求，确保后端服务正常启动无报错，可以直接在浏览器访问后端接口地址确认端口可正常连通。

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