构建后的 Ionic Ajax / CORS 问题答案

【问题标题】：Ionic Ajax / CORS issue after build构建后的 Ionic Ajax / CORS 问题
【发布时间】：2018-05-23 17:45:01
【问题描述】：

我正在使用 ionic 3 并编写一些提供程序代码以从位于某些 https 服务器中的 api 端点获取结果，例如 https://apiserver/api/endpoint/article 是我的终点。我的提供商代码如下。

// provider class function
load(){

    if(this.data){
      return Promise.resolve(this.data);
    }

    let headers = new HttpHeaders()
      .set("Access-Control-Allow-Origin", "*")
      .set('Access-Control-Allow-Methods', 'GET, POST')
      .set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    return new Promise(resolve => {
      this.http.get('/api/endpoint/article',{headers})
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        },err => {
          console.log(err);
        });
    });
  }


// ionic.config.json
{
  "name": "app",
  "app_id": "app_id",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "https://apiserver/api"
    }
  ]
}

load() 返回我在我的应用程序中显示的数据，这项工作 PERFECTLY 在我的 localhost、Ionic DevApp、Ionic View 中也可以通过 Ios/xcode 模拟器进行调试。 >

但是当我将我的应用程序安装到手机上时，它不会返回任何数据并显示空白页。

我已经调试了它，整个赌注没有找到任何关于这种行为的原因。可能是 CORS ？

【问题讨论】：

尝试放一些控制台日志，看看在移动设备上运行时是否有任何错误。
已经用模拟器试过了，但在模拟器中运行良好，不知道如何为移动设备放置控制台日志。
您可以尝试在视图本身中记录错误。至少我们可以知道是否抛出了错误
好的去试试

标签： angular typescript ionic-framework cors ionic3

【解决方案1】：

当您构建应用程序时，您需要使用真正的端点。离子代理仅适用于调试（即当您使用 ionic cordova run ios -l 时）。

所以，这个

this.http.get('/api/endpoint/article',{headers})

变成

this.http.get('https://apiserver/api/endpoint/article',{headers})

【讨论】：

那么如何修复 CORS 以构建应用程序
如果您使用 REAL 端点而不是离子代理，它应该可以工作。否则，您需要通过在服务器响应中添加正确的标头来修复 CORS 服务器端。