[Ionic]如何配置請求proxy

在開發階段, 我們的前端和後端可能分別運行在同一臺機器的不同端口或同一個局域網內的不同ip上, 前端訪問後端api時就會碰到跨域的場景.

這個時候我們可以通過在Augular中設置proxy來解決這個CrossDomain問題.

當然在之後正式發佈時, 一般通過後端web服務器(如nginx)或後端代碼配置來實現跨域控制.

以下是在Ionic/Angular中設置proxy代理的參考步驟:

(1) 創建proxy.conf.json配置文件

在package.json同一級目錄下創建proxy.conf.json配置文件, 並加入如下內容:

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

其中/api表示所有以此作爲請求URL開頭的request, 都會被代理到真正的後端地址: http://localhost:8000, 這個後端地址根據你的實際情況來定義.

(2) 修改angular.json配置文件

如下增加一行配置*“proxyConfig”: “proxy.conf.json”*:

"serve": {
   "builder": "@angular-devkit/build-angular:dev-server",
   "options": {
     "browserTarget": "app:build",
     "proxyConfig": "proxy.conf.json"
   },
   "configurations": {
     "production": {
       "browserTarget": "app:build:production"
     }
   }
},

(3) 修改package.json中的啓動配置,如下將:

    "start": "ng serve ",

修改爲:

"start": "ng serve --proxy-config proxy.conf.json",

(4)重新啓動ng進程

npm start

即可實現api請求代理的效果.

(5)若使用ionic serve, 可以:

ionic serve -l -o --proxy-config proxy.conf.json