CODEWITHSUNDEEP
angulartypescriptionic-frameworkcorsionic3
Udit Rawat
Udit Rawat

Reputation: 674

Ionic Ajax / CORS issue after build

I am using ionic 3 and write some provider code to get result from api endpoint that is place in some https server for example https://apiserver/api/endpoint/article is my end point. my provider code is below.

// 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() returns me data which i show in my app, This work PERFECTLY in my localhost, Ionic DevApp, Ionic View also when debugging through Ios/xcode emulator.

but when i install my app to mobile phone it does not return any data and show me blank page.

I have debug it whole bet didn't find any reason about this behavior. may be CORS ?

Upvotes: 0

Views: 338

Answers (1)

minux
minux

Reputation: 2784

When you build app you need to use the real endpoint. Ionic proxy works only for debugging (ie. when you use ionic cordova run ios -l).

So, this 

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

becomes 

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

Upvotes: 1

Related Questions