IOS app CORS error

Ionic Framework ionic-v3
1

In my IONIC app I am accessing a server for login purposes. In android everything is happening fine, I am able to make XHR request and getting the response as well. In ios the call is not happening and the error that I am getting in web inspector are ->

  1. [Error] Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. (login, line 0)
  2. [Error] XMLHttpRequest cannot load https://xyz.com/auth/login. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

why this CORS error is occuring in ios and not in android. I can allow all clients to connect to the server by making : Access-Control-Allow-Origin = ā€˜*ā€™ , but this is not secure. Help me please.

2

You can use the native http plugin to not get CORS error.
It is a common error as ionic now uses the WKWebView for iOS.
But the plugin only works on device, not on browser.

A simple alternative is to change Access-Control-Allow-Origin to accept request from http://localhost:8080

https://ionicframework.com/docs/native/http/
https://blog.ionicframework.com/wkwebview-for-all-a-new-webview-for-ionic/

1 Like
3

Thanks for the reply, now I am using a real device to make requests. I am using ionic-native/http now but now I am not able to make any XHR requests. I crossed check for android as well in chrome developer tools. in network tab under chrome developer tool no requests is happening. can u just share a simple example or blog. I will be very grateful you you can help me.

4

Do you need this?

1 Like
5

Hi, try to add the http.setDataSerializer and change the Content-Type to JSON.

Something like this:

let url = "https://myserver.com";
let params = { "user": { "name": "Dale" } };
let headers = { };
this.http.setDataSerializer("json");
this.http.setHeader("Accept", "application/json");
this.http.setHeader("Content-Type", "application/json");
this.http.post(url, params, headers)
  .then((response:HTTPResponse) => {
    console.log(`POST ${url} ${JSON.stringify(response.data)}`);
  })
  .catch((error:any) => {
    console.error(`POST ${url} ${error.error}`);
  });
1 Like
6

not getting any data on the server side while making post request, also there is an error that says serHeader requires 3 argument instead of 2, I checked setHeader method in documentation it says, three argument needs to be there : host, header, value

7

My code is something like this , although in headers the content-type is application/json , the payload is not available.

onLogin(){
    let alert = null;
    let url = 'http://10.0.0.32:3000/login';
    let payload = { 
      'username' : 'xyz',
      'password' : 'abc'
    };

    let headers = {};
    this.http.setDataSerializer('json');
    this.http.setHeader(url,"Accept", "application/json");
    this.http.setHeader(url,"Content-Type", "application/json");
    this.http.post(url,payload,headers)
    .then( res => {
      let alert = this.alert.create({
        title : 'Login status',
        subTitle : 'logion successfully',
        buttons : ['Dismiss']
      });
 
      alert.present();
    })
    .catch( err => {
      console.log('Error : ',err);
      let alert = this.alert.create({
        title : 'login errro',
        subTitle : err,
        buttons : ['Dismiss']
      });
      alert.present();
    })
  }
}
8

Hello Sir
Now I have same error too
error_token
Anyway, Please see my code once
Thanks

9

which http are u using to Make requests angular or ionic-native? if itā€™s a cors problem in iOS app try using ionic-native/http, see the documentation

10

Thanks for your reply
could you explain more detail?
I have already used Ionic-native http, but error was same

11

can u tell me what is the exact error, in my case I am able to make http requests but not able to pass the data when making post requests.

12

error_token
Please check my screenshot again
Content-Type : ā€œapplication/x-www-form-urlencodedā€
You have used application/json

My code is Get AUTH Token Error Funcation

13

I have just used ionic-native-http
but i have got error like ā€œError : advanced-http : header values must be stringā€
Could you tell me how to use http.setheader?

14

use like this instead of the way you implemented :

this.http.setDataSerializer('urlencoded');
let headers = {
   'Content-Type' : 'application/x-www-form-urlencoded'
}
15

Error: advanced-http: ā€œdataā€ argument supports only following data types: Object
I have just got this error
Could you show me sample code(oauth token)?

16

You can try without setHeaders too.

onLogin(){
    let alert = null;
    let url = 'http://10.0.0.32:3000/login';
    let payload = { 
      'username' : 'xyz',
      'password' : 'abc'
    };

    let headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};

    this.http.setDataSerializer('json');
    this.http.post(url,payload,headers)
    .then( res => {
      let alert = this.alert.create({
        title : 'Login status',
        subTitle : 'logion successfully',
        buttons : ['Dismiss']
      });
 
      alert.present();
    })
    .catch( err => {
      console.log('Error : ',err);
      let alert = this.alert.create({
        title : 'login errro',
        subTitle : err,
        buttons : ['Dismiss']
      });
      alert.present();
    })
  }
}
1 Like
17

WOW!!!
Great Answer!!!
Just solved it
:smile: