2016-06-15 69 views
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仍然是一个问题。

我发现这个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; 
    } 
    } 

回答

1

withCredentails的支持将出现在即将发布的RC2版Angular2中。它不是RC1版本的一部分......你需要等一下。

随着RC2,您将能够直接在请求选项使用此属性:

this.get('...', { withCredentials: true }) 

详情请参见这个问题: