事情的起因

由于最近在使用Angular + node開發(fā)，采取的辦法一直都是約定好接口，然后node實(shí)現(xiàn)，再編寫前端。但是這樣有一個(gè)很麻煩的問題：編寫前端的時(shí)候無法調(diào)用接口，不能很好地測(cè)試，只能一口氣寫完再編譯后放到后端來測(cè)試。

經(jīng)常會(huì)因?yàn)榻鉀Q一些小的問題而反復(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)建，并沒有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ù)地址，比如一個(gè)get請(qǐng)求的地址為http://localhost:4200/api/cards/all會(huì)被代理為

       http://localhost:3000/api/cards/all

       secure為是否開啟ssl驗(yàn)證，在這里設(shè)置為false

接下來只需要啟動(dòng)node服務(wù)，再使用ng serve --proxy-config proxy.conf.json來啟動(dòng)自己的Angular項(xiàng)目就可以完美實(shí)現(xiàn)代理了，簡(jiǎn)直不要太好用，以前的方法簡(jiǎn)直是蠢爆了！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家武林網(wǎng)的支持。