問題描述
我無法使用 http 將我的 Angular 1 JavaScript 服務移動到 Angular 2 TypeScript 服務以發(fā)出 CORS 請求(這是使用 Ionic 版本 2).在 Angular 1 中，我做了這樣的事情.
I'm having trouble moving my Angular 1 JavaScript service to a Angular 2 TypeScript service using http to make a CORS request (this is using Ionic version 2). In Angular 1, I do something like this.
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 中，發(fā)生了很多變化(Promises/Observables).到目前為止，我的嘗試如下所示.
In Angular 2 using TypeScript, a lot has changed (Promises/Observables). My attempt so far looks like the following.
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);
}
}
我不再確定如何在 Angular 2 中解決我在 Angular 1 中的問題
I am no longer sure how to address in Angular 2 what I had in Angular 1
- withCredentials(請注意，https://angular.io/docs/js/latest/api/http/index/RequestOptionsArgs-interface.html#!#withCredentials-anchor 說
RequestOptionsArgs應該有一個字段withCredentials但我在 IDE Visual Studio 代碼中收到一個錯誤，提示它在界面中不存在；ionic 可能使用的是較舊的 angular 2 版本?) 標頭(x-request-with 和 x-access-token)實際反應
- withCredentials (note that https://angular.io/docs/js/latest/api/http/index/RequestOptionsArgs-interface.html#!#withCredentials-anchor says the
RequestOptionsArgsshould have a fieldwithCredentialsbut I get an error in the IDE Visual Studio Code saying that it does not exists in the interface; ionic is probably using an older angular 2 version?) headers (x-request-with and x-access-token)the actual response
我做了更多的搜索，我能夠理解如何插入標題并正確處理訂閱.但是，withCredentials 仍然是個問題.
I did a little bit more searching, and I was able to understand how to insert headers and properly handle the subscription. However, the withCredentials is still a problem.
我發(fā)現這個 SO 帖子 angular2 xhrfields withcredentials true 并修改了我的構造函數，如下所示.現在可以了.
I found this SO post angular2 xhrfields withcredentials true and modified my constructor as follows. It works now.
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 的支持將出現在即將發(fā)布的 Angular2 RC2 版本中.它不是 RC1 版本的一部分...您需要稍等.
The support of withCredentails will be present in the RC2 version of Angular2 that will be released soon. It's not part of the RC1 version... You need to wait a bit.
使用 RC2，您將能夠直接在請求選項中使用此屬性:
With RC2, you will be able to use this property directly in the request options:
this.get('...', { withCredentials: true })
查看這個問題了解更多詳情:
See this question for more details:
- Angular 2 - http get withCredentials
這篇關于如何在 Ionic 中使用 CORS 編寫 Angular 2 服務?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！