為什么要配置代理：解決前后端的跨域問題，即前后端服務的協(xié)議/域名/端口不一致就會出現(xiàn)跨域現(xiàn)象。
如：本地的后臺服務端口是3002，前臺請求端口是4230

前臺配置單一代理
1） 在項目根目錄下新建一個proxy.conf.json文件

{"/api/*": {"target": "http://localhost:3002","secure": false,"changeOrigin": true,"logLevel": "debug","auth": "LOGIN:PASS"} }

target: 請求目標服務地址
secure：為false時，允許不是https和安全證書無效的服務
changeOrigin：為true ，允許請求跨域
2）在package.json文件中添加服務啟動時同時啟動代理文件

"scripts": {"ng": "ng","start": "ng serve --port=4203 --open --proxy-config proxy.conf.json","build": "ng build --prod","test": "ng test","lint": "ng lint","e2e": "ng e2e"},

若想代理多個路徑，如想代理本地上傳圖片，可在proxy.conf.json中加一個context參數(shù)，內(nèi)容是數(shù)組

{"context":["/static","/api"],"target": "http://localhost:3002","secure": false,"changeOrigin": true,"logLevel": "debug","auth": "LOGIN:PASS" }

3）在angular.json中引用代理：

"serve": {"builder": "@angular-devkit/build-angular:dev-server","options": {"browserTarget": "iqnr-platform:build","proxyConfig": "proxy.config.json"},

總結

以上是生活随笔為你收集整理的Angular设置代理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。