Angular增加proxy設定,自動將連結轉向後端

前言

在Angular專案中
開發時期常常會需要Call到本機另一個port的Server或開發環境的api
但上線時,又會將整個專案與Server打包在一起

將後端api與整個域名寫死在專案之中絕對不是個好方法

除了最直覺直接想到的寫在environment之外,也可以使用Angular本身提供的proxy來做到
透過proxy,也可以精簡專案裡的api網址,看著也更加舒適!

作法

  1. 在專案根目錄下,增加proxy.conf.json

    1
    2
    3
    4
    5
    6
    7
    {
    "/api/": {
    "target": "http://127.0.0.1:3000", // 依自己的後端調整ip: port
    "secure": false,
    "logLevel": "debug",
    }
    }
  2. 打開Angular.json,在serve.options底下,增加一行

    1
    "proxyConfig": "proxy.conf.json"

就會自動代理轉發了!

補充說明proxy.conf.json

除了上面的參數之外
還有changeOriginpathRewrite參數可以做到更深度的客制化,解決複雜的跨域需求

1
2
3
4
5
6
7
8
9
{
"/api/": {
"target": "http://127.0.0.1:3000",
"changeOrigin": true,
"logLevel": "debug",
"secure": false,
"pathRewrite": {"^/api" : "http://localhost:3000/api"}
}
}

在大部份情境下,通常只需要targetsecure(即作法裡的寫法)就行了
也滿建議將logLevel打開,確定自己的api轉發是正確的
避免無謂的抓錯時間

參考資料

stack overflow/angular-cli server - how to proxy API requests to another server?