Ionic 3 状态响应：0 for URL: null

Question

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

当我运行它在 iOS（模拟器和设备）上时，所有具有 headers 的服务器请求都失败并显示错误 "Response with status: 0 for URL: null"。 Android 这些请求工作正常。

如果我在 没有 headers 的情况下执行请求，我会从服务器得到预期的响应。

我知道问题出在 WKWebView 和 CORS 上。服务器已正确配置 CORS。我用 @angular/http 模块来处理请求。

让我们看一些代码。

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

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 问题，但是当我用它发出请求时，我得到了此错误：

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.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:

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

  ],
})

我希望有人能给我一些启发，因为我迷失在 Ionic 的道路上。

谢谢。

Answer 1

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

按照以下步骤使用此插件

第一步：添加Http原生插件

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

安装 Link：HTTP

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

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

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

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

希望对您有所帮助。

Answer 2

我在 android 中遇到了同样的问题，其余的 api 无法在 android 模拟器或设备中工作并给出错误：Url 的响应为 0：空。最后我得到了 cordova 平台 android 版本问题的解决方案，如果 cordova Android 版本是 6.3 那么它工作正常但是 cordova Android 版本是 7.0 或 7.1。 1 那么它对我不起作用。

所以，我认为在 ios 你应该检查你的 ios 平台版本，然后再试一次。您可以使用 cli 命令检查 ios 或 android 版本。 离子信息

同时检查你所有的 cordova 插件是否安装。如果有人失踪，请手动安装并再次检查。您可以使用 cli 命令检查您的 cordova 插件。 cordova 插件-ls

觉得对你有帮助

谢谢

Ionic 3 状态响应：0 for URL: null

Ionic 3 Response with status: 0 for URL: null

ios

ionic-framework

wkwebview

wkwebviewconfiguration

ionic3