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