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