如何在离子中使用CORS编写Angular 2服务?
问题描述:
我无法通过使用http发出CORS请求(这是使用Ionic版本2)将我的Angular 1 JavaScript服务移动到Angular 2 TypeScript服务。在Angular 1中,我做了这样的事情。如何在离子中使用CORS编写Angular 2服务?
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;
}])
在使用TypeScript的Angular 2中,很多已经改变(Promises/Observables)。到目前为止,我的尝试如下所示。
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);
}
}
我不再知道如何在角2地址是什么,我在角1
- withCredentials(注意https://angular.io/docs/js/latest/api/http/index/RequestOptionsArgs-interface.html#!#withCredentials-anchor说
RequestOptionsArgs
应该有一个字段withCredentials
,但我在得到一个错误IDE Visual Studio Code说它在界面中不存在;离子可能使用的是较老的角度2版本?) 标题(x请求和x访问令牌)实际响应
我做了一点点的搜索,我能够理解如何插入页眉和正确处理订阅。但是,withCredentials仍然是一个问题。
我发现这个SO帖子angular2 xhrfields withcredentials true并修改了我的构造函数,如下所示。它现在有效。
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;
}
}
答
withCredentails
的支持将出现在即将发布的RC2版Angular2中。它不是RC1版本的一部分......你需要等一下。
随着RC2,您将能够直接在请求选项使用此属性:
this.get('...', { withCredentials: true })
详情请参见这个问题: