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

总结

解决问题过程中，心力交瘁，解决后，才感觉原来这么简单那！
一路曲折，记录一下解决办法。