如何在 Ionic 中使用 CORS 编写 Angular 2 服务?

2022-01-13 00:00:00 javascript angular typescript ionic2 angular-http

我无法使用 http 将我的 Angular 1 JavaScript 服务移动到 Angular 2 TypeScript 服务以发出 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 中，发生了很多变化(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 RequestOptionsArgs should have a field withCredentials but 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.

我发现这个 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 的支持将出现在即将发布的 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

相关文章