Angular HttpClient调用Node.js接口URL异常：请求路径被拼接至前端端口

问题原因 #

你写的请求地址127.0.0.1:3000/people没有指定协议（http://或https://），浏览器会把它当成相对路径，自动拼接到当前Angular应用的基础URL（http://127.0.0.1:4200）后面，导致请求地址错误。

解决方案 #

1. 使用完整绝对URL（快速临时解决） #

直接在地址前加上http://，让浏览器识别为独立的目标地址：

constructor(private http: HttpClient){
}

getPersonData(): Observable<person[]> {
  return this.http.get<person[]>("http://127.0.0.1:3000/people");
}

2. 配置Angular代理（开发环境推荐） #

这种方式适合开发阶段，避免硬编码地址，同时解决跨域问题：

• 在项目根目录创建proxy.conf.json文件，内容如下：

{
  "/api/*": {
    "target": "http://127.0.0.1:3000",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {"^/api": ""}
  }
}

• 修改angular.json中的serve配置，添加代理文件路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build",
    "proxyConfig": "proxy.conf.json"
  }
}

• 修改服务中的请求路径为相对路径：

getPersonData(): Observable<person[]> {
  return this.http.get<person[]>("/api/people");
}

启动Angular应用后，请求会自动代理到http://127.0.0.1:3000/people。

3. 用环境变量管理API地址（生产环境友好） #

通过环境变量统一管理API地址，方便开发/生产环境切换：

• 在src/environments/environment.ts中定义基础地址：

export const environment = {
  production: false,
  apiBaseUrl: 'http://127.0.0.1:3000'
};

• 生产环境修改src/environments/environment.prod.ts中的对应地址即可。
• 在服务中导入环境变量并拼接地址：

import { environment } from '../environments/environment';

// ...

getPersonData(): Observable<person[]> {
  return this.http.get<person[]>(`${environment.apiBaseUrl}/people`);
}

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