Angular 2 REST API 調用 Spring 引導項目

Question

我正在嘗試創建 angular 2 項目。 在我的項目中，我將使用 REST 調用 Spring Boot 微服務來進行數據庫插入和更新。

• 我正在使用單獨的編輯器來創建 Angular 2 項目。 我可能會選擇 sublime editor。 我的 Spring Boot 項目在 STS 編輯器中。 當我在瀏覽器上運行 Angular 2 項目時，它會調用 STS 編輯器中已經啟動的 REST 點嗎？
• 兩者都在我的本地系統中。 我的 Angular 使用 localhost://4200 和我的 Spring Boot 項目是通過 localhost:8080/。 那么我可以運行 Angular 項目嗎？ 這種方法可行嗎？

Answer 1

是的，您必須使用 CORS 請求進行 api 調用。 對於您的端點，只需在發出請求時指定完整的 url http://localhost:8080/api ，而在生產中使用相同的源 /api。 您可能希望使用 Spring 為 prod 提供 dist 文件夾的內容。 您只需要弄清楚如何設置一個可以檢查環境的變量，以便您可以切換 url。

對於開發 api，您需要確保 CORS 配置正確，即處理 OPTION 請求並設置正確的標頭，否則瀏覽器會抱怨。

Answer 2

在我的應用程序中，啟用 CORS 后，在我的 angular 項目（在 VSCode 中）中，在 app.component.ts 中我有

  private baseURL:string='http://localhost:8080/';
  private getUrl:string = this.baseURL + '/local/';

我得到的看起來像：

  getWelcomeMessage(): Observable<any>{
      return this.httpClient.get(this.getUrl, {responseType: 'json'});
  }

我的訂閱看起來像

this.getWelcomeMessage().subscribe(
  welcome=>{
   console.log(Object.values(welcome));
   this.welcome=<any>Object.values(welcome);
  }
   );

對於導出接口：

export interface Welcome{
  message:string;
}

這讓我可以在 IntelliJ IDEA 中的 spring 引導后端向我的 Angular 前端顯示一條歡迎消息。