angualr 使用http模塊發送網絡請求和跨域訪問

1代碼實踐

1.1 引入模塊HttpClientModule

app.module.ts裏面引入HttpClientModule，分爲兩步：

• import { HttpClientModule } from ‘@angular/common/http’;
• NgModule的元數據對象的，imposts屬性中，追加HttpClientModule
  

1.2 使用模塊中的HttpClient類

只需要一步：import { HttpClient} from ‘@angular/common/http’;
然後就可以直接用了，http這個類實例是類的私有屬性，其實可以作爲私有屬性直接寫的，但是，實例化時new的時候不太好new……所以偷懶，用作爲構造函數的入參這種方法去初始化私有屬性。
調用httpclient的方法和異步處理subscribe實現異步加載。
注！！如果不在模塊中先導入模塊，而是在組件中直接使用這個類，靜態檢查能通過，但編譯運行時無法識別出這類。

2 跨域訪問

本地運行時，當url設置爲百度的一個get請求時，由於get的返回值中包含js腳本，因爲就會涉及跨域訪問問題，導致無法查看get請求的返回最結果。解決方法：

1. 項目的根目錄proxy.config.json文件，內容爲：

{
	"/":{
		"target":"http://網址:端口" //這裏是你的接口所在的位置
	}
}

2. 修改package.json文件中的scripts選項中的starts，

"start": "ng serve --proxy-config proxy.config.json"

3. npm start 重新運行項目
4. 原來調用接口的代碼不需要任何修改，比如：

this.http.post(url,val).map(res => res.json()).subscribe(data=>{
	if (data) {
		this.title=data.msg;
	}
})