事情的起因
由于最近在使用Angular + node
開發(fā)屠阻,采取的辦法一直都是約定好接口,然后node
實現(xiàn)释牺,再編寫前端髓削。但是這樣有一個很麻煩的問題:編寫前端的時候無法調(diào)用接口,不能很好地測試葡兑,只能一口氣寫完再編譯后放到后端來測試奖蔓。經(jīng)常會因為解決一些小的問題而反復的編譯、調(diào)試讹堤,浪費很多不必要的時間吆鹤。
解決方案
偶然發(fā)現(xiàn)webpack-dev-server
可以實現(xiàn)代理請求(把指定的url規(guī)則轉(zhuǎn)發(fā)到其他地址),所以就試了一下洲守。由于項目使用了Angular-cli
構(gòu)建疑务,并沒有webpack
配置文件,悲傷梗醇。于是又去google上搜索了一圈Angular-cli
知允,找到了Angular-cli
實現(xiàn)代理的解決方案。
在項目目錄下創(chuàng)建文件proxy.conf.json
:
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
-
/api
為代理規(guī)則叙谨,因為我接口都是以api
開頭的温鸽,大家可以根據(jù)自己的實際情況設置 -
target
為目標服務地址,比如一個get
請求的地址為http://localhost:4200/api/cards/all
會被代理為http://localhost:3000/api/cards/all
-
secure
為是否開啟ssl
驗證唉俗,在這里設置為false
接下來只需要啟動node
服務嗤朴,再使用ng serve --proxy-config proxy.conf.json
來啟動自己的Angular
項目就可以完美實現(xiàn)代理了,簡直不要太好用虫溜,以前的方法簡直是蠢爆了雹姊!
本文結(jié)束,感謝閱讀衡楞!