Angular 5使用HttpClient调用Spring Boot REST API请求被拒绝如何解决

• 你控制台看到的net::ERR_CONNECTION_REFUSED报错针对的是http://localhost:9000/sockjs-node/info请求，该请求和你调用的8080后端接口无关，是Angular CLI热重载功能的依赖服务请求失败，通常是热重载端口被占用、配置错误导致，该错误不影响业务接口请求。
• 你业务接口没有拿到数据的核心原因是组件代码的回调逻辑错误：getEmployees方法的subscribe回调里仅写了data => this.employees，没有完成赋值操作，即使接口请求成功，数据也不会存入组件的employees变量。
• 额外可能的原因：你没有在AppModule中导入HttpClientModule，导致HttpClient未生效，请求根本无法发出。

1. 消除sockjs-node报错（可选，不处理不影响业务功能，仅影响热重载） #

如果需要正常使用热重载，可选择以下任意一种方式：

• 重启Angular开发服务，启动时指定未被占用的热重载端口：ng serve --live-reload-port 4201
• 临时关闭热重载功能，启动命令改为：ng serve --no-live-reload

2. 修复业务接口数据获取逻辑 #

首先修改employee-list.component.ts中的getEmployees方法，补全赋值逻辑，同时添加错误回调方便排查：

private getEmployees()
{
  this.employeeService.getEmployeesList().subscribe(
    data => {
      this.employees = data;
      // 可打开注释验证是否拿到返回数据
      // console.log("接口返回数据：", data)
    },
    error => {
      console.error("接口请求报错：", error)
    }
  );
}

3. 确认基础配置正确 #

• 检查根模块app.module.ts是否已导入HttpClientModule，示例如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入该模块
import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 加入imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 直接在浏览器访问http://localhost:8080/api/v1/employees，确认能正常拿到JSON格式的员工数据，排除后端接口本身的问题。

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