Question

我是离子的新手，我尝试为不同的环境设置代理配置。我有几个特定于环境的配置文件，它们使用webpack和一个环境变量加载，该变量在离子被提供之前设置（参见：https://github.com/gshigeto/ionic-environment-variables）。

一切都按预期工作但我不知道如何解决以下问题：我的代理配置（ionic.config.json）如下所示：

"proxies": [
    {
      "path": "/api",
      "proxyUrl": "https://dv.mydomain.com/api",
      "rejectUnauthorized": false
    }
  ]

我的一个http调用如下所示：

return this.http.get<User[]>(ENV.apiUrl + '/api/users')

我必须删除ENV.apiUrl，因为否则代理配置中指定的模式不匹配，但如果我这样做，我就无法区分不同的环境了。我试图将域添加到代理配置的路径中，但这不起作用。

有没有办法解决这个问题？我在离子论坛上问了同样的问题，但到目前为止还没有人回答。

Answer 1

我解决的方式＆＃34;它到目前为止还没有使用Ionic代理。我已经安装了this plugin for chrome，它基本上通过向响应标头添加Access-Control-Allow-Origin：*来禁用chrome的CORS保护。

Answer 2

apiUrl不能只是一个URL路径组件吗？例如：

// environment.pro.ts
export const environment: any = {
    apiUrl: '/pro'
};

// environment.dev.ts
export const environment: any = {
    apiUrl: '/dev'
};

然后，像：

// ionic.config.json
"proxies": [
  {
    "path": "/pro/api",
    "proxyUrl": "https://example.com/api",
    "rejectUnauthorized": false
  },
  {
    "path": "/dev/api",
    "proxyUrl": "https://dev.example.com/api",
    "rejectUnauthorized": false
  }
]

Answer 3

CORS问题仅针对本地开发，因为Ionic使用浏览器进行本地开发。在移动设备中，所有的javascript都将被复制为file：// 因此，起源不会存在。

因此，要处理此问题，您可以安装chrome扩展程序 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

这应该可以解决问题。

针对不同环境的离子代理配置

3 个答案: