ค้นหาเว็บไซต์

javascript - ฉันจะเขียนบริการ Angular 2 พร้อม CORS ใน Ionic ได้อย่างไร?


ฉันกำลังมีปัญหาในการย้ายบริการ JavaScript ของ Angular 1 ของฉันไปเป็นบริการ TypeScript ของ Angular 2 โดยใช้ http เพื่อทำคำขอ CORS (นี่กำลังใช้ Ionic เวอร์ชัน 2) ใน Angular 1 ฉันทำอะไรบางอย่างแบบนี้

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;
}])

ใน Angular 2 ที่ใช้ TypeScript มีหลายอย่างที่เปลี่ยนไป (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);
  }
}

ฉันไม่แน่ใจอีกต่อไปว่าจะจัดการใน Angular 2 อย่างไรกับสิ่งที่ฉันมีใน Angular 1

  • withCredentials (โปรดทราบว่า https://angular.io/docs/js/latest/api/http/index/RequestOptionsArgs-interface.html#!#withCredentials-anchor กล่าวว่า RequestOptionsArgs ควรมีฟิลด์ withCredentials แต่ฉันได้รับข้อผิดพลาดใน IDE Visual Studio Code บอกว่าไม่พบฟิลด์นี้ในอินเทอร์เฟซ; ionic อาจจะใช้เวอร์ชัน Angular 2 เก่ากว่า?)
  • หัวข้อ (x-request-with และ x-access-token)
  • การตอบสนองจริง

ฉันค้นหาเพิ่มเติมเล็กน้อย และฉันสามารถเข้าใจวิธีการแทรกหัวข้อและจัดการการสมัครสมาชิกอย่างถูกต้องแล้ว อย่างไรก็ตาม withCredentials ยังคงเป็นปัญหาอยู่

ฉันเจอโพสต์ SO นี้ angular2 xhrfields withcredentials true และได้แก้ไข constructor ของฉันดังต่อไปนี้ ตอนนี้มันใช้งานได้แล้ว

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 })

ดูคำถามนี้สำหรับรายละเอียดเพิ่มเติม:

  • Angular 2 - http get พร้อมกับ credentials