Angular人员管理系统遇net::ERR_CONNECTION_REFUSED错误的排查方案

我正在用Angular开发一个小型人员管理系统（类似日程表），这是我的第一个Angular项目。跟着教程完成开发后，之前遇到的类型问题已经解决，但现在运行应用时，尝试创建人员会收到「Connection Refused」提示，查询后得知是API未启动导致无法连接。每次访问/api/persons接口都会触发该错误。

错误信息 #

person-list.component.ts:59 GET http://localhost:8080/api/persons?name=Pablo net::ERR_CONNECTION_REFUSED

person-create-component.ts #

import { Component, OnInit } from '@angular/core';
import { PersonService } from 'src/app/services/person.service';

@Component({
  selector: 'app-person-create',
  templateUrl: './person-create.component.html',
  styleUrls: ['./person-create.component.css']
})
export class PersonCreateComponent implements OnInit {
  person = {
    name: '',
    surname: '',
    address: '',
    phone: '',
    whatsapp: '',
    instagram: '',
    available: false
  };
  submitted = false;

  constructor(private personService: PersonService) { }

  ngOnInit(): void {
  }

  createPerson(): void {
    const data = {
      name: this.person.name,
      surname: this.person.surname,
      address: this.person.address,
      phone: this.person.phone,
      whatsapp: this.person.whatsapp,
      instagram: this.person.instagram,
      available: this.person.available
    };

    this.personService.create(data)
      .subscribe( // Chrome控制台显示错误出在这一行
        response => {
          console.log(response);
          this.submitted = true;
        },
        error => {
          console.log(error);
        });
  }

  newPerson(): void {
    this.submitted = false;
    this.person = {
      name: '',
      surname: '',
      address: '',
      phone: '',
      whatsapp: '',
      instagram: '',
      available: false
    };
  }

}

person-service.ts #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseURL = 'http://localhost:8080/api/persons';

export type Person =
{  
  available: boolean;
  id: number;
  name: string;
  surname: string;
  address: string;
  phone: string;
  whatsapp: string;
  instagram: string;
};

@Injectable({
  providedIn: 'root'
})

export class PersonService {

  constructor(private httpClient: HttpClient) { }
  
  readAll(): Observable<any> {
    return this.httpClient.get(baseURL);
  }

  read(id: any): Observable<any> {
    return this.httpClient.get(`${baseURL}/${id}`);
  }

  create(data: any): Observable<any> {
    return this.httpClient.post(baseURL, data);
    
  }
  update(id: any, data: any): Observable<any> {
    return this.httpClient.put(`${baseURL}/${id}`, data);
  }

  delete(id: any): Observable<any> {
    return this.httpClient.delete(`${baseURL}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.httpClient.delete(baseURL);

    
  }

  searchByName(name: string): Observable<any> {
    return this.httpClient.get(`${baseURL}?name=${name}`);
  }


}

1. 确认后端API是否运行 #

• 直接在浏览器地址栏输入 http://localhost:8080/api/persons，如果显示无法访问/连接拒绝，说明后端服务未启动。
• 找到教程对应的后端项目（如Spring Boot、Node.js等），启动后端服务，确保服务监听端口为8080，与Angular代码中的baseURL一致。

2. 验证API可用性 #

后端启动后，再次访问http://localhost:8080/api/persons：

• 若返回JSON数据（空数组也可），说明API正常。
• 若仍无法访问，检查后端路由配置是否正确，同时确认后端是否配置了CORS（Angular默认运行在4200端口，后端需允许该端口的跨域请求）。

3. 检查Angular端配置 #

• 确认person-service.ts中的baseURL与后端API地址完全匹配，包括端口、路径。
• 若后端端口不是8080，修改baseURL中的端口号。

4. 排查请求细节 #

后端正常后，重新尝试创建人员。若仍报错，打开Chrome控制台的「Network」标签：

• 检查请求URL是否正确
• 确认请求头、请求体符合后端API要求
• 查看后端返回的具体错误信息（若有）

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