angular8設置代理，解決跨域請求問題

環境

控制檯輸入 ng v

背景

由於項目是通過ionic 創建的。版本號是5.4.16
設置代理可以是ionic的方式，也可以是angular的方式。
但是網上說的ionic 方式，配置ionic.config.json沒有作用。
試了好多篇文章的方法都不行，就採用angular設置代理方式。

開始

1.創建文件：proxy.json

項目的根路徑下新建一個proxy.json文件，用於設置各種代理。

2. 設置代理地址

需要注意的三個地方已經圈出來了

具體代碼 proxy.json文件

{
    "/query": {
        "target":"http://5------------d.mock.pstmn.io/query",
        "secure":false,
        "loglevel":"debug",
        "changeOrigin":true,
        "pathRewrite":{
            "^/query":"/"
        }
    },
    "/msweb": {
        "target":"http://localhost:8080/app",
        "secure":false,
        "loglevel":"debug",
        "changeOrigin":true,
        "pathRewrite":{
            "^/msweb":"/"
        }
    }
    
}

3. 使用proxy文件

項目的根路徑裏面 :在angular.json文件中使用上面設置的代理。
兩個紅圈位置。server標籤下面使用proxyConfig配置

實際代碼：

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

4. 實際調用

在service裏面調用，
用於在上面配置了 query 關鍵字，所以這邊加上query

發佈

如果用設置代理的方式，打包發佈，放到服務器的話，會報錯
{"isTrusted":true}
大概還是跨域的問題。
解決辦法有兩個：

1. 代碼裏面使用絕對路徑，不用代理（用代理只是爲了方便開發過程中方便調試，不出現跨域的報錯）
2. 根據proxy.json代理配置。設置服務器Apache代理；

在Apache配置文件httpd.conf 文件末尾增加如下內容
<IfModule mod_proxy.c>
  ProxyPass /query http://5------------d.mock.pstmn.io/query
</IfModule> 
同時打開兩個註釋，如下圖所示：
mod_proxy.so跟mod_prody_http.so

總結

解決問題過程中，心力交瘁，解決後，才感覺原來這麼簡單那！
一路曲折，記錄一下解決辦法。