如何通過來自 Angular 的 HTTP GET 請求獲取數據到端口 8080 上本地運行的 Spring Boot REST API？

Question

我確實使用了有角度的 HttpClient。 它可以從在線可用的各種 API 獲取數據，但無法從我的 Spring Boot RESTful API 獲取數據，該 API 運行於 HTTP://localhost:8080/users

誰能告訴可能是什么問題，並提出一些可能的修復方法？

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss'],
})
export class SignupComponent implements OnInit {
  data: Object;
  http: HttpClient;
  constructor(http: HttpClient) {
    this.http = http;
  }

  postdetail(): void {
    this.http
      .get('http://localhost:8080/users')
      .subscribe((data) => {
        this.data = data;
      });
  }

  ngOnInit(): void {}
}

Answer 1

import { Component, OnInit } from '@angular/core';
import { ApiService} from 'path to api service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss'],
})
export class SignupComponent implements OnInit {
  data: MyDetailInterface;
  constructor(private apiService: ApiService) {}


  ngOnInit(): void {
   this.apiService.postDetail().subscribe((data) => {
    this.data = data;
  });
  }

}

創建一個服務api.service.ts而不是直接從您的組件進行 http 調用：

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

export const BASE_URI: string = "http://localhost:8080/"


@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private httpClient: HttpClient) { }

  postDetail(): Observable<MyDetailInterface> {
    return this.httpClient.get<MyDetailInterface>(BASE_URI + "users");
  }

}

創建 MyDetailInterface 接口：

export interface MyDetailInterface {
    id: number;
    ....

   
  }