angular5使用httpclient時解決跨域問題

跨域問題的環境：

在本地開發時，使用命令列ng s開啟服務，訪問地址為http://localhost:4200

假設呼叫資料介面的服務地址為http://localhost:8088/api/data.action

 

解決跨域問題的方法：

在angular4專案根目錄下建立檔案proxy.config.json，檔案內容為：

{
  "/api":{
    "target":"http://localhost:8088"
  }
}

 

那麼使用命令列 ng s --proxy-config proxy.config.json重新開啟服務後，就把介面服務代理過來了，就可以使用

http://localhost:4200/api/data.action來請求介面服務了，那麼問題就迎刃而解了，因為現在不跨域了。

網上很多人問為啥用這種辦法還是解決不了，那是因為開啟服務的方法不對，要加引數，注意我上面標紅的地方。

 

使用httpclient請求資料的相關程式碼：

hero.service.ts

import { Injectable } from '@angular/core';

import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
 
import { Hero } from '../data/hero';

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

  constructor(private http: HttpClient) { }
  
    getHeroes(): Observable<Hero[]> {
         return this.http.get<Hero[]>("/api/data.action");
  }
}

我給的程式碼並不完整，這些並不重要，只看標紅的部分就夠了，這個示例是根據官方的例子改的。