關于Angular2 + node接口調試的解決方案
事情的起因
由于最近在使用Angular + node開發(fā)，采取的辦法一直都是約定好接口，然后node實現(xiàn)，再編寫前端。但是這樣有一個很麻煩的問題：編寫前端的時候無法調用接口，不能很好地測試，只能一口氣寫完再編譯后放到后端來測試。
經常會因為解決一些小的問題而反復的編譯、調試，浪費很多不必要的時間。
解決方案
偶然發(fā)現(xiàn)webpack-dev-server可以實現(xiàn)代理請求（把指定的url規(guī)則轉發(fā)到其他地址），所以就試了一下。由于項目使用了Angular-cli構建，并沒有webpack配置文件，悲傷。于是又去google上搜索了一圈Angular-cli，找到了Angular-cli實現(xiàn)代理的解決方案。
在項目目錄下創(chuàng)建文件proxy.conf.json：
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
1、/api為代理規(guī)則，因為我接口都是以api開頭的，大家可以根據自己的實際情況設置
2、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)代理了，簡直不要太好用，以前的方法簡直是蠢爆了！
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家腳本之家的支持。
相關文章
這篇文章主要給大家介紹了關于angular引入ng-zorro的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要介紹了AngularJS路由用法,簡單分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以參考下2017-05-05
淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要給大家介紹了關于Angular4學習教程之HTML屬性綁定的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
橫向商品欄,把原有的滾動條改成自定義的樣式,并且給兩邊加上箭頭可以調整,可以拖動商品和滾輪實現(xiàn)滾動條效果,這篇文章主要介紹了angularjs 指令實現(xiàn)自定義滾動條效果,需要的朋友可以參考下2024-03-03
AngularJS和django的模板都是用{{}}來引用變量的，這就導致了沖突，所以這篇文章主要就給大家介紹了如何解決Angular.Js與Django標簽沖突的方案，有需要的朋友們可以參考借鑒，下面來一起學習學習吧。2016-12-12
ng-events類似ionic中Events的angular全局事件
這篇文章主要介紹了ng-events類似ionic中Events的angular全局事件,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
本篇文章主要介紹了Angular 5.x 學習筆記之Router(路由)應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Angular.js組件之input mask對input輸入進行格式化詳解
這篇文章主要給大家介紹了關于Angular.js組件之input mask對input輸入進行格式化的相關內容，文中通過示例代碼詳細介紹了將銀行卡號和日期的方法，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-07-07
AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用示例
這篇文章主要介紹了AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用的方法,較為詳細的分析了AngularJS的功能、下載及應用創(chuàng)建方法,需要的朋友可以參考下2016-11-11