我有一个 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,
...
],
})
我希望有人能给我一些启示，因为我迷失在 Ionic 的道路上.
I hope some one can bring me some light on this, because I'm so lost in the paths of Ionic.
谢谢.
为了避免 CORS 问题，特别是在 iOS 中，您必须使用 @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
第一步:添加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
});
希望这会对你有所帮助.
Hope this will help you.
这篇关于Ionic 3 响应状态:0 对于 URL:null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！