關(guān)于Angular2 + node接口調(diào)試的解決方案
事情的起因
由于最近在使用Angular + node開(kāi)發(fā)，采取的辦法一直都是約定好接口，然后node實(shí)現(xiàn)，再編寫(xiě)前端。但是這樣有一個(gè)很麻煩的問(wèn)題：編寫(xiě)前端的時(shí)候無(wú)法調(diào)用接口，不能很好地測(cè)試，只能一口氣寫(xiě)完再編譯后放到后端來(lái)測(cè)試。
經(jīng)常會(huì)因?yàn)榻鉀Q一些小的問(wèn)題而反復(fù)的編譯、調(diào)試，浪費(fèi)很多不必要的時(shí)間。
解決方案
偶然發(fā)現(xiàn)webpack-dev-server可以實(shí)現(xiàn)代理請(qǐng)求（把指定的url規(guī)則轉(zhuǎn)發(fā)到其他地址），所以就試了一下。由于項(xiàng)目使用了Angular-cli構(gòu)建，并沒(méi)有webpack配置文件，悲傷。于是又去google上搜索了一圈Angular-cli，找到了Angular-cli實(shí)現(xiàn)代理的解決方案。
在項(xiàng)目目錄下創(chuàng)建文件proxy.conf.json：
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
1、/api為代理規(guī)則，因?yàn)槲医涌诙际且詀pi開(kāi)頭的，大家可以根據(jù)自己的實(shí)際情況設(shè)置
2、target為目標(biāo)服務(wù)地址，比如一個(gè)get請(qǐng)求的地址為http://localhost:4200/api/cards/all會(huì)被代理為
http://localhost:3000/api/cards/all
secure為是否開(kāi)啟ssl驗(yàn)證，在這里設(shè)置為false
接下來(lái)只需要啟動(dòng)node服務(wù)，再使用ng serve --proxy-config proxy.conf.json來(lái)啟動(dòng)自己的Angular項(xiàng)目就可以完美實(shí)現(xiàn)代理了，簡(jiǎn)直不要太好用，以前的方法簡(jiǎn)直是蠢爆了！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家腳本之家的支持。
相關(guān)文章
AngularJS入門(mén)教程之表單校驗(yàn)用法示例
這篇文章主要介紹了AngularJS表單校驗(yàn)用法,結(jié)合實(shí)例形式分析了AngularJS各種常見(jiàn)的表單校驗(yàn)功能及使用技巧,需要的朋友可以參考下2016-11-11
@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Angularjs通過(guò)指令監(jiān)聽(tīng)ng-repeat渲染完成后執(zhí)行腳本的方法
指令是angular的核心功能之一，用好了事半功倍，監(jiān)聽(tīng)ng-repeat執(zhí)行狀態(tài)僅僅是它功能的冰山一角吧。下面這篇文章主要介紹了Angularjs通過(guò)指令監(jiān)聽(tīng)ng-repeat渲染完成后執(zhí)行腳本的方法,需要的朋友可以參考下。2016-12-12
我們將通過(guò)示例介紹一種在 Angular 應(yīng)用程序中獲取當(dāng)前日期的簡(jiǎn)單方法，我們還將解決如何更改 Angular 中的日期格式，對(duì)在Angular中獲取當(dāng)前日期感興趣的朋友跟隨小編一起看看吧2023-05-05
Angular Universal服務(wù)器端渲染避免 window is not&
這篇文章主要介紹了Angular Universal服務(wù)器端渲染避免 window is not defined錯(cuò)誤消息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
下面小編就為大家?guī)?lái)一篇淺談angularJS中的事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
詳解angular筆記路由之a(chǎn)ngular-router
本篇文章主要介紹了詳解angular筆記路由之a(chǎn)ngular-router，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了Angular7.2.7路由使用初體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
本篇文章主要介紹了AngularJS 霸道的過(guò)濾器小結(jié)，在實(shí)際操作中，我們需要對(duì)統(tǒng)一數(shù)據(jù)源進(jìn)行多次轉(zhuǎn)換，本文詳細(xì)討論有關(guān)過(guò)濾器的用法 。2017-04-04