1
Ich bin neu in IONIC-2 und eine Verbindung herstellen möchten meine mobile App Odoo - open source ecommerce .. diese Verbindung beinhaltet einige JSONP Anfrage zu lösen .. Ich habe das gleiche durch jQuery zuvor .. seine Arbeits getan richtig in phonegap App .. aber während ich mit IONIC-2 das gleiche tue es gibt mir CORS und JSONP Fehler ..Wie CORS Ausgabe und JSONP Ausgabe in Ionic2
mir jemand dabei helfen kann ..
mein vorheriger jQuery Code ist ..
/****** index.js ******/
function json(url, params) {
var deferred = jQuery.Deferred();
uniq_id_counter += 1;
var payload = {
'jsonrpc': '2.0',
'method': 'call',
'params': params,
'id': ("r" + uniq_id_counter)
};
rpc_jsonp(url, payload).then(function (data, textStatus, jqXHR) {
if (data.error) {
deferred.reject(data.error);
}
deferred.resolve(data.result, textStatus, jqXHR);
});
return deferred;
}
function rpc_jsonp(url, payload) {
// extracted from payload to set on the url
var data = {
session_id: window.localStorage.getItem("session_id"),
id: payload.id
};
var ajax = {
type: "POST",
dataType: 'jsonp',
jsonp: 'jsonp',
cache: false,
data: data,
url: url
};
var payload_str = JSON.stringify(payload);
var payload_url = jQuery.param({r: payload_str});
if (payload_url.length < 2000) {
// throw new Error("Payload is too big.");
}
console.log(ajax);
ajax.data.r = payload_str;
console.log(ajax);
return jQuery.ajax(ajax);
}
/****** index.js ******/
ich oben custom json Funktion Login.html Datei .. nenne
/****** login.html ******/
function login(){
var base_url = 'MY_SERVER_URL';
json(base_url+'web/session/authenticate', {
'base_location': base_url,
'db':'myDB',
'login': 'admin',
'password':'admin'
}).done(function (data) {
if(data.uid != false){
alert(data);
}
else{
alert('Invalid Username or Password.');
}
deferred.resolve();
}).fail(function(data){
alert('Invalid Username or Password.');
});
return deferred;
}
/****** login.html ******/
Ich folgte versucht, Code in IONIC 2 während service
/****** OdooJsonService.ts ******/
import { Injectable } from '@angular/core';
import { Http, Jsonp, JSONP_PROVIDERS, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
@Injectable()
export class OdooJsonService {
//data: any;
uniq_id_counter: number;
payload: any;
result_rpc: any;
constructor(private http: Http, private jsonp: Jsonp) {
this.http = http;
//this.data = null;
}
json(url, params) {
this.uniq_id_counter = this.uniq_id_counter + 1;
this.payload = JSON.stringify({
'jsonrpc': '2.0',
'method': 'call',
'params': params,
'id': ("r" + this.uniq_id_counter)
});
return this.rpc_jsonp(url, this.payload)
.map(res => res.json())
.catch(this.handleErrorOne);
}
rpc_jsonp(url, payload) {
let data = JSON.stringify({
//session_id: window.localStorage.getItem("session_id"),
id: payload.id
});
let ajax = JSON.stringify({
type: 'POST',
dataType: 'jsonp',
jsonp: 'jsonp',
cache: false,
data: data,
url: url
});
let headers = new Headers({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'PUT, GET, POST',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'});
let options = new RequestOptions({ headers: headers });
return this.http.post(url, ajax, options)
.map(res => res.json())
.catch(this.handleErrorTwo);
}
handleErrorOne(error) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
handleErrorTwo(error) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
} // End of OdooJsonService
/****** OdooJsonService.ts ******/
zu schaffen und ich oben service in Login.ts
/****** login.ts ******/
import { Component } from '@angular/core';
import { App, NavController, MenuController, ViewController } from 'ionic-angular';
import { TaskListPage } from '../task-list/task-list';
import { Http, Jsonp, JSONP_PROVIDERS } from '@angular/http';
import { OdooJsonService } from '../../providers/odoo-json-service/odoo-json-service';
@Component({
templateUrl: 'build/pages/login/login.html',
providers: [OdooJsonService, JSONP_PROVIDERS]
})
export class LoginPage {
public data: any;
constructor(private nav: NavController, public odooJsonService: OdooJsonService) {
this.odooMethod();
}
odooMethod() {
this.odooJsonService
.json('MY_SERVER_URL/web/session/authenticate', {'base_location': 'MY_SERVER_URL',
'db':'myDB', 'login': 'admin', 'password':'admin'})
.subscribe(odooData => {
this.data = odooData;
console.log(JSON.stringify(this.data));
});
}
}
/****** login.ts ******/
Fehler in der Konsole: (Chrom)
XMLHttpRequest cannot load https://MY_SERVER_URL/web/session/authenticate. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 500.
Fehler in der Konsole: (firefox)
/web/session/authenticate: Function declared as capable of handling request of type 'json' but called with a request of type 'http'
Ich bin nicht sicher, ob dies der richtige Ansatz ist .. Kann jemand führen, dies zu tun in richtige Reihenfolge ..
wie kann ich das gleiche erreichen in IONIC 2 ??
Vielen Dank im Voraus.
Kuba ist richtig. Es sollte funktionieren, wenn Sie Ihre App auf einem Android- oder iOS-Gerät ausführen. Zum Testen im Browser siehe meine Antwort unten. – MasterProgrammer200
Auf dem Gerät gibt es kein Erfolgs- oder Fehlerprotokoll. Ich verstehe nicht, ob mein Code falsch ist oder etwas anderes, was zählt. – VaibsVB
Ich hatte Probleme mit HTTPS mit dieser, hat die API-Site korrekte Zertifikate von Android akzeptiert? Wenn es möglich ist, versuchen Sie es zuerst mit HTTP. Und setzen Sie einen Haltepunkt in den Code, so dass Sie sehen, ob es tatsächlich ausgeführt wird. –