Ich habe Probleme, meinen Angular 1 JavaScript-Dienst in einen Angular 2 TypeScript-Dienst zu verschieben, der http verwendet, um eine CORS-Anfrage zu erstellen (dies verwendet die Ionic-Version 2). In Angular 1 mache ich so etwas.Wie schreibe ich einen Angular 2 Service mit CORS in Ionic?
angular.module('app.services',[])
.factory('LoginService', ['$http', function($http) {
var service = {};
service.isUserLoggedIn = function() {
var restUrl = 'http://10.10.10.25:8080/api/user/isloggedin';
var options = {
method: 'GET', url: restUrl, withCredentials: true,
headers: {
'x-request-with': 'XMLHttpRequest',
'x-access-token': 'sometoken'
}
};
return $http(options);
};
return service;
}])
In Angular 2 mit TypeScript hat sich viel geändert (Promises/Observables). Mein bisheriger Versuch sieht wie folgt aus.
import { Injectable } from '@angular/core';
import { Headers, Http, Response, RequestMethod, RequestOptionsArgs } from '@angular/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class LoginService {
constructor(private _http:Http) {
}
isLoggedIn():boolean {
var r:any;
var e:any;
let url = 'http://10.10.10.25:8080/api/user/isloggedin';
let options:RequestOptionsArgs = {
url: url,
method: RequestMethod.Get,
search: null,
headers: new Headers({
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'x-access-token' : 'sometoken'
}),
body: null
};
this._http.get(url, options).map(this.extractData).catch(this.handleError)
.subscribe(
response => { r = <any>response; console.log(r); },
error => { e = <any>error; console.log(e); });
return false;
}
private extractData(response:Response) {
let body = response.json();
return body.data || { };
}
private handleError(error:any) {
let errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.log('error = ' + errMsg);
return Observable.throw(errMsg);
}
}
Ich bin nicht mehr sicher, wie in Angular 2 zu adressieren, was ich in Angular 1
hatte- withCredentials (beachten Sie, dass https://angular.io/docs/js/latest/api/http/index/RequestOptionsArgs-interface.html#!#withCredentials-anchor sagt die
RequestOptionsArgswithCredentialsein Feld haben sollte, aber ich erhalte eine Fehlermeldung in der IDE Visual Studio-Code zu sagen, dass es nicht in der Schnittstelle nicht vorhanden ist, ionische wird wahrscheinlich eine ältere Winkel Version 2 verwenden) Header (x-Anfrage-mit und x-access-Token)?
die tatsächliche Antwort
Ich habe ein wenig mehr suchen, und ich war in der Lage zu verstehen, wie Header eingefügt und richtig das Abonnement behandeln. Die withCredentials ist jedoch immer noch ein Problem.
Ich fand diese SO Post angular2 xhrfields withcredentials true und modifizierte meinen Konstruktor wie folgt. Es funktioniert jetzt.
constructor(@Inject(Http) private _http:Http) {
let _build = (<any> _http)._backend._browserXHR.build;
(<any> _http)._backend._browserXHR.build =() => {
let _xhr = _build();
_xhr.withCredentails = true;
return _xhr;
}
}