Ionic 3 Response with status: 0 for URL: null

问题:

I have an Ionic 3 app. I recently added the iOS platform.

When i run it on iOS (emulator and device) all the server requests that has headers fail with the error "Response with status: 0 for URL: null". On Android those requests works fine.

If I do the requests without headers i get the expected response from server.

I know the problem is with WKWebView and CORS. The server has the CORS configured correctly. I do the requests with @angular/http module.

Let's see some code.

This is my provider for doing requests to server:

import { Injectable } from '@angular/core';
import { Content } from 'ionic-angular';
import { Http, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { HTTP } from '@ionic-native/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Globalization } from '@ionic-native/globalization';

import { Globals } from '../providers/globals';

...

/// Here we have one example Request (it's inside a method)

/// Here I create the URL for the request
let url = this.server_url + this.server_functions.doSearch;

/// Now I create the Headers for the Request
let headers = new Headers();
/// As You can see, I have tried to pass diferent headers to server
    // headers.append("Access-Control-Allow-Origin","*");
    // headers.append("Origin", "https://localhost:8080");
    // headers.append("Access-Control-Allow-Methods","POST, GET, OPTIONS, PUT");
    // headers.append("Accept","application/json");
    // headers.append("Content-Type","application/json; charset=utf-8");

/// If the user is logged in I have to send this headers to server
if ( !this.globals.guestMode ) {
    headers.append("TokenAuth", this.globals.getLogRegData()["TokenAuth"]);
    headers.append("IdAuth", this.globals.getLogRegData()["IdAuth"]);
}

/// And here we start the GET Request
this.http.get( url, { headers: headers } ).map(res => res.json()).subscribe(
    data => {
        // console.log( JSON.stringify(data) );
        callback( data );
    },
    err => {
        console.log("ELOL: "+err);
    }
);

By the other way, I decided to try the @ionic-native/http module (as you can see in the imports) to avoid the WKWebView and CORS problems, but when I do the request with it, I got this error:

WARN: Native: tried calling HTTP.get, but the HTTP plugin is not installed.
WARN: Install the HTTP plugin: 'ionic cordova plugin add cordova-plugin-advanced-http'

This is how I do the Request with the native plugin:

this.httpnative.get(url, {}, {})
    .then(data => {

        console.log(data.status);
        console.log(data.data); // data received by server
        console.log(data.headers);

    })
    .catch(error => {

        console.log(error.status);
        console.log(error.error); // error message as string
        console.log(error.headers);

    });

This is a fragment of my app.module.ts:

import { HttpModule } from '@angular/http';
import { HTTP } from '@ionic-native/http';
...
@NgModule({
...
 imports: [
...
    HttpModule,
    HTTP,
...

  ],
})

I hope some one can bring me some light on this, because I'm so lost in the paths of Ionic.

Thank You.

回答1:

To avoid CORS problem specially in iOS you must use @ionic-native/http plugin which is actually Advanced HTTP plugin for API calling.

Follow below steps to use this plugin

Step 1: Add Http native plugin

$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http

Installation Link : HTTP

Step 2: Import HTTP native plugin in your file where you wants to cal API.

import { HTTP, HTTPResponse } from '@ionic-native/http';

Step 3: How to use this plugin for API call ?

constructor(public httpPlugin: HTTP) {

  }

//Set header like this
this.httpPlugin.setHeader("content-type", "application/json");

//Call API 
this.httpPlugin.get(this.url, {}, {}).then((response) => {
    //Got your server response
}).catch(error => {
    //Got error 
});

Hope this will help you.

回答2:

I have same issue in android, rest api not working in android emulator or device and give error: Response with 0 for Url: null. and finally i got solution that there is cordova platform android version issue, if there is cordova Android version is 6.3 then it’s working properly but it there is cordova Android version is 7.0 or 7.1.1 then it’s not working for me.

So, I think in ios you should check your ios platform version and then try again. You can check ios or android version using cli command. ionic info

Also check your all cordova plugins is installed or not. If someone is missing then install it manually and check again. You can check your cordova plugins using cli command. cordova plugin -ls

I think it is helpful you.

Thanks