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

本文介绍了如何在 Ionic 中使用 CORS 编写 Angular 2 服务?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

我无法使用 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;
    }
  }

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

问题描述

推荐答案

相关文档推荐