[Ionic3] - Angular Http not working in ios

Hello,

I’m a new ionic developer. I use de last version of ionic and create a blank project.
I created a new provider for requests API.
browser requests are working but in ios not working.

import { Http } from ‘@angular/http’;

export class ApiSocialLemonProvider {

private apiUrl:string;

private headers:any = new Headers({
‘Access-Control-Allow-Origin’: ‘*’,
‘Access-Control-Allow-Methods’: ‘GET, POST, OPTIONS, PUT, PATCH, DELETE’,
‘Access-Control-Allow-Headers’: ‘X-Requested-With,content-type’,
‘Access-Control-Allow-Credentials’: true
});

constructor(public http: Http, private platform: Platform) {
//check platform web and using proxy
//console.log(this.platform.platforms());
//console.log(this.platform.is(‘core’));

if (this.platform.is('core')
  || this.platform.is('mobileweb')){

  console.log("Proxy!");
  this.apiUrl = "/api";

} else {

  console.log("withoutProxy!");
  this.apiUrl = "https://test.herokuapp.com/api";
}

}

authenticate(code){

return new Promise((resolve, reject) => {
  this.http.post(this.apiUrl + '/sign_in', { 'code': code }, {headers: this.headers})
  .map(res => res.json())  
  .subscribe(res => {

      resolve(res);

    }, err => {

      reject(err.json());

    });
});

}

}

how it works in chrome ? and we can get error message under console

Chrome is working successful.
In IOS not working, return error:

_body:ProgressEvent
headers:Headers
ok:false
status:0
statusText:""
type:3
url:null

1 Like

Use Safari’s remote debugging to track down the issue. Also, is the config.xml set up correctly to allow remote access to the api?

Hello Chris, thank you for your answer.
I believe config.xml is correct
see bellow:

<?xml version='1.0' encoding='utf-8'?> Sociallemon Take Photos Sociallemon NSAllowsArbitraryLoads
private headers:any = new Headers({
‘Access-Control-Allow-Origin’: ‘*’,
‘Access-Control-Allow-Methods’: ‘GET, POST, OPTIONS, PUT, PATCH, DELETE’,
‘Access-Control-Allow-Headers’: ‘X-Requested-With,content-type’,
‘Access-Control-Allow-Credentials’: true
});

These are the headers you need to set on your API server, not on the client

3 Likes

Hi, Did you got solution for this? I am also facing same issue. Let me know if you get solution for this issue.

What I found is that you should set the HTTP server to have the right response to the CORS OPTIONS preflight request. The key point is that the Access-Control-Allow-Headers can not be “*” and should include any custom headers used in your app. Below is my setting that works:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, MyCustomHeader

Thank you so much @beck24. I was struggling from last 4 day to get the right solution for the same problem. Your solution worked like a charm. Thanks again.

You added this code in your server code?