构建后的Ionic Ajax / CORS问题

时间:2017-12-09 18:49:59

标签: angular typescript ionic-framework cors ionic3

我正在使用离子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()返回我在我的应用中显示的数据,在 localhost,Ionic DevApp,Ionic View中通过Ios / xcode模拟器进行调试时,此工作 PERFECTLY

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

我调试了整个赌注没有找到任何关于这种行为的理由。可能是CORS?

1 个答案:

答案 0 :(得分:1)

构建应用时,您需要使用真实端点。离子代理只适用于调试(即当你使用离子cordova运行ios -l时)。

所以,这个

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

成为

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