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");
  }
}

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