Ionic 3 アプリがあります。最近、iOS プラットフォームを追加しました。
iOS (エミュレーターとデバイス) で実行すると、ヘッダーを持つすべてのサーバー要求が"Response with status: 0 for URL: null"というエラーで失敗します。Android では、これらのリクエストは正常に機能します。
ヘッダーなしでリクエストを行うと、サーバーから期待される応答が得られます。
問題が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);
}
);
ところで、WKWebView と CORS の問題を回避するために @ionic-native/http モジュール (インポートでわかるように) を試すことにしましたが、それを使用してリクエストを実行すると、次のエラーが発生しました。
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 の道に迷い込んでいるので、誰かがこれについていくらか光を当ててくれることを願っています。
ありがとうございました。