# Angular建立proxy.conf.json代理請求轉發到後端服務 ## 有關 proxy.conf.json 通常用於處理 cross 跨域問題，當前端在做api串接若要訪問到不同網址的後端Server時，可以建立「proxy.conf.json」做代理，將前端的Request轉到後端的Server。 ## 設定方式 ### STEP1. 建立 proxy.conf.json 代理伺服器設定檔 在專案根目錄或指定目錄下建立proxy.conf.json檔(範例以./src/下為主，如下樹狀圖所示) ``` . ├── README.md ├── angular.json ├── json-server │ ├── _db.js │ └── hero ├── package-lock.json ├── package.json ├── src │ ├── app │ ├── assets │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── proxy.conf.json #代理用的json設定檔 │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ``` ### STEP2. 新增需代理的網址和相關properties ```json= # proxy.config.json { "/fakeApi": { "target": "http://10.10.56.171:3000", "secure": false, "changeOrigin": true, "logLevel": "debug", "pathRewrite": { "^/fakeApi": "" } } } ``` :::info **內容說明:** **'/fakeApi'**：只有呼叫的api開頭是這個內容才會進行代理。 **target**：目標網址。 **secure**：是否使用https。如果目標網址是https則要設定成true。 **changeOrigin**：是否更改Requert Header中的Host。若為true則會將Request Header的Host從「localhost」 改成target的 「10.10.56.171」，進而解決cross問題。 **logLevel**：提供"debug"、"info"、"warn"、"error"四種Log等級，會依據級別在Server的Terminal中顯示不同程度的訊息內容。 **pathRewrite**：重寫路徑，將"/fakeApi/AAA"重寫成"AAA"。 ::: ### STEP3. 在 angular.json 中的 architect.serve 底下新增options.proxyConfig 項目 ```json= … "architect": { "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "proxyConfig": "src/proxy.conf.json" }, … ``` #### STEP4. 重啟Angular Server ``` $ ng serve ``` ![image](https://hackmd.io/_uploads/BkGXlUWPp.png) > 成功代理