GET http://localhost:8000/api net::ERR_CONNECTION_REFUSED

Question

我正在制作一个 Angular 项目来显示、添加、删除和更新员工详细信息。我有一个让自己连接的 api，但是当我尝试发布或获取员工列表时，我总是遇到同样的错误。我正在使用 Angular、Express、Node 和 Mongodb。任何帮助将不胜感激。我不确定要放置什么代码以使帮助更容易，但我可以放置错误。在此处输入图像描述

Get Error

Error

Post Error

import { Injectable } from '@angular/core';
import { Employee } from './Employee';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
 
export class CrudService {
 
  // Node/Express API
  REST_API: string = 'http://localhost:8000/api';
 
  // Http Header
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
  router: any;
 
  constructor(private httpClient: HttpClient) { }
 
  // Add
  AddEmployee(data: Employee): Observable<any> {
    let API_URL = `${this.REST_API}/add-employee`;
    return this.httpClient.post(API_URL, data)
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Get all objects
  GetEmployees() {
    return this.httpClient.get(`${this.REST_API}`);
  }
 
  // Get single object
  GetEmployee(id:any): Observable<any> {
    let API_URL = `${this.REST_API}/read-employee/${id}`;
    return this.httpClient.get(API_URL, { headers: this.httpHeaders })
      .pipe(map((res: any) => {
          return res || {}
        }),
        catchError(this.handleError)
      )
  }
 
  // Update
  updateEmployee(id:any, data:any): Observable<any> {
    let API_URL = `${this.REST_API}/update-employee/${id}`;
    return this.httpClient.put(API_URL, data, { headers: this.httpHeaders })
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Delete
  deleteEmployee(id:any): Observable<any> {
    let API_URL = `${this.REST_API}/delete-employee/${id}`;
    return this.httpClient.delete(API_URL, { headers: this.httpHeaders}).pipe(
        catchError(this.handleError)
      )
  }
 
 
  // Error 
  private handleError(error: Response | any) {
    let errorMessage = '';
    if (error.status == 0) {
      // Handle client error
      errorMessage = error.error.message;
      this.router.navigate(['/error'])
    } else {
      // Handle server error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }
 
}

import { Injectable } from '@angular/core';
import { Employee } from './Employee';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
 
export class CrudService {
 
  // Node/Express API
  REST_API: string = 'http://localhost:8000/api';
 
  // Http Header
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
  router: any;
 
  constructor(private httpClient: HttpClient) { }
 
  // Add
  AddEmployee(data: Employee): Observable<any> {
    let API_URL = `${this.REST_API}/add-employee`;
    return this.httpClient.post(API_URL, data)
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Get all objects
  GetEmployees() {
    return this.httpClient.get(`${this.REST_API}`);
  }
 
  // Get single object
  GetEmployee(id:any): Observable<any> {
    let API_URL = `${this.REST_API}/read-employee/${id}`;
    return this.httpClient.get(API_URL, { headers: this.httpHeaders })
      .pipe(map((res: any) => {
          return res || {}
        }),
        catchError(this.handleError)
      )
  }
 
  // Update
  updateEmployee(id:any, data:any): Observable<any> {
    let API_URL = `${this.REST_API}/update-employee/${id}`;
    return this.httpClient.put(API_URL, data, { headers: this.httpHeaders })
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Delete
  deleteEmployee(id:any): Observable<any> {
    let API_URL = `${this.REST_API}/delete-employee/${id}`;
    return this.httpClient.delete(API_URL, { headers: this.httpHeaders}).pipe(
        catchError(this.handleError)
      )
  }
 
 
  // Error 
  private handleError(error: Response | any) {
    let errorMessage = '';
    if (error.status == 0) {
      // Handle client error
      errorMessage = error.error.message;
      this.router.navigate(['/error'])
    } else {
      // Handle server error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }
 
}

Answer 1

我猜你的后端/快递服务器没有运行。可以看说明here 您可以使用node app.js 运行您的服务器 // 用你的文件名替换 app.js

因此，一旦您在浏览器上打开 http://localhost:8000/api，这应该会给出结果（因为这是一个 get 请求）。

Answer 2

1. 确保两台服务器都在运行（后端和前端）。

2. 查看谷歌开发工具并查看网络部分。查看请求标头和一般信息。确保请求 URL / backend 有你的后端服务器 URL，而 orgin / frontend 有你的前端 URL。

您的问题是您的后端没有正确连接到您的前端。