【问题标题】：Ionic v4: Using Proxy to resolve CORS failsIonic v4：使用代理解决 CORS 失败
【发布时间】：2022-04-05 22:16:16
【问题描述】：

我知道这是一个常见的问题，并且被问过很多次。但是所有方法都不适用于 ionic v4。

我想从这个 URL 获取数据：http://data.szmb.gov.cn/szmbdata/open/openData.do?type=""&appid=""&appKey="";

尝试过的方法：

使用chrome“启用跨域资源共享”插件。失败。
离子原生和 Cordova 插件。这个方法返回一个Promise，但我想要一个Observable。
编辑 proxy.conf.json 文件并将其添加到 angular.js，如下所示：

proxy.conf.json:

{
    "/openData.do?": {
       "target": "http://data.szmb.gov.cn/szmbdata/open",
       "changeOrigin": true,
       "secure": false,
       "logLevel": "debug"
     }
}

Angular.json:

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

由https://forum.ionicframework.com/t/proxy-config-not-working-for-v4-beta/139400 提供。

将代理添加到 ionic.config.json - 这似乎不适用于 ionic v4。

我的离子信息：

    Ionic:

       ionic (Ionic CLI)             : 4.10.3 (C:\Users\15432\AppData\Roaming\npm\node_modules\ionic)
       Ionic Framework               : @ionic/angular 4.0.1
       @angular-devkit/build-angular : 0.12.4
       @angular-devkit/schematics    : 7.2.4
       @angular/cli                  : 7.2.4
       @ionic/angular-toolkit        : 1.4.0

    Cordova:

       cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
       Cordova Platforms     : none
       Cordova Plugins       : no whitelisted plugins (1 plugins total)

    System:

       NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
       npm    : 6.4.1
       OS     : Windows 10

编辑：我尝试了离子代理文档（https://ionicframework.com/docs/cli/using-a-proxy）提供的另一种方法。仍然以某种方式不起作用。假设，当我已经将代理设置为喜欢“http://data.szmb.gov.cn/szmbdata/open/”时，我只需要输入http.get(openData.do? + ......) 即可到达目的地。但是，ionic serve 仍然返回一个“localhost:8100/openData.do?...”，就像 方法 3 的情况一样。

【问题讨论】：

有关于这个的消息吗？我也有同样的问题。

标签： angular ionic-framework cors ionic4

【解决方案1】：

您需要使用以下方式运行应用程序：

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

【讨论】：

【解决方案2】：

配置代理时的一个常见错误是在必要时不使用pathRewrite 选项。

例如，如果你的目标 api 在：

http://www.example.com/data

并且您在代理配置中设置为路径：

/api

您还应该从最终网址中删除或替换 /api 部分，并将其替换为 pathRewrite：

{
  "/api": {
    "target": "http://www.example.com/data",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

你的电话会是这样的：

this.http.get<ApiResponse>('/api/data/user/10')

因此，代理会将您的呼叫重定向到

http://www.example.com/data/user/10

更新：

我现在看到您的替换是正确的，但也许答案会对其他人有所帮助。

【讨论】：

【解决方案3】：

刚遇到和你一样的问题，我用两种方法解决了，不过我最喜欢的是第二种。

方法一

感谢这个文档：https://ionicframework.com/docs/v3/cli/configuring.html
它适用于 v3，但我尝试过，它适用于 v6。
不过，我认为最好使用第二种方法。

在项目的根目录中更新您的 ionic.config.json：

{
    "name": "myApp",
    ...
    "type": "angular",
    "proxies": {
        "path": "/openData.do?",
        "proxyUrl": "http://data.szmb.gov.cn/szmbdata/open"
    }
}

使用ionic serve 重新启动您的服务器。
在这种方法中，您不需要有proxy.config.json 文件。

方法二

您可以直接更改 Angular 项目的设置。

在 angular.json 中，搜索此部分并添加 proxyConfig 属性：

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

它会搜索您的文件。
与上一个方法相同，只需使用ionic serve 重新运行即可。

【讨论】：