[Ionic3] - Angular Http not working in ios

Ionic Framework ionic-v3
1

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());

    });
});

}

}

2

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

3

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
4

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?

5

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
6 
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

2 Likes
7

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

8

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

9

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.

10

You added this code in your server code?