事情的起因
由于最近在使用Angular + node開發,采取的辦法一直都是約定好接口,然后node實現,再編寫前端。但是這樣有一個很麻煩的問題:編寫前端的時候無法調用接口,不能很好地測試,只能一口氣寫完再編譯后放到后端來測試。
經常會因為解決一些小的問題而反復的編譯、調試,浪費很多不必要的時間。
解決方案
偶然發現webpack-dev-server可以實現代理請求(把指定的url規則轉發到其他地址),所以就試了一下。由于項目使用了Angular-cli構建,并沒有webpack配置文件,悲傷。于是又去google上搜索了一圈Angular-cli,找到了Angular-cli實現代理的解決方案。
在項目目錄下創建文件proxy.conf.json:
{
"/api": {
"target": ":3000",
"secure": false
}
}
1、/api為代理規則,因為我接口都是以api開頭的,大家可以根據自己的實際情況設置
2、target為目標服務地址,比如一個get請求的地址為:4200/api/cards/all會被代理為
:3000/api/cards/all
secure為是否開啟ssl驗證,在這里設置為false
接下來只需要啟動node服務,再使用ng serve --proxy-config proxy.conf.json來啟動自己的Angular項目就可以完美實現代理了,簡直不要太好用