事情的起因

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

經常會因為解決一些小的問題而反復的編譯、調試，浪費很多不必要的時間。

解決方案

偶然發現webpack-dev-server可以實現代理請求（把指定的url規則轉發到其他地址），所以就試了一下。由于項目使用了Angular-cli構建，并沒有webpack配置文件，悲傷。于是又去google上搜索了一圈Angular-cli，找到了Angular-cli實現代理的解決方案。

在項目目錄下創建文件proxy.conf.json：

{ "/api": {  "target": "http://localhost:3000",  "secure": false }}

 1、/api為代理規則，因為我接口都是以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項目就可以完美實現代理了，簡直不要太好用，以前的方法簡直是蠢爆了！

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家錯新站長站的支持。