Ionic 3响应状态：0表示URL：null [英] Ionic 3 Response with status: 0 for URL: null

问题描述

我有一个Ionic 3应用程序。我最近添加了iOS平台。

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

当我在iOS（模拟器和设备）上运行它时，所有带有标头的服务器请求都会失败并显示错误状态：0表示URL：null。在Android上，这些请求工作正常。

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.

我知道问题出在 WKWebView 和 CORS 上。服务器正确配置了CORS。我使用 @ angular / http 模块执行请求。

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

让我们看一些代码。

这是我向服务器发出请求的提供商：

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

另一方面，我决定尝试@ ionic-native / http模块（尽可能在导入中看到）以避免WKWebView和CORS问题，但当我用它做请求时，我收到了这个错误：

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

    });

这是我app.module.ts的一个片段：

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.

谢谢你。

推荐答案

为避免在 iOS 中特别出现 CORS 问题，您必须使用@ ionic- native / http插件，实际上是用于API调用的高级HTTP插件。

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

第1步：添加Http原生插件

Step 1: Add Http native plugin

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

安装链接： HTTP

第2步：导入您希望在其中调用API的文件中的HTTP本机插件。

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

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

第3步：如何使用此插件进行API调用？

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

希望这会对你有帮助。

这篇关于Ionic 3响应状态：0表示URL：null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！