Angular http stream double request [GET,HEAD]

Question

I am working on learning Angular[6], and while I don't have a very strong understanding of Observables, I feel like I've at least built a usable example. However, I am running into a consistent problem which leads me to believe that I am using a poor approach or have fundamentally misunderstood something.

In my ApiService:

 getTransaction(uid:number):Observable<Transaction[]>{
   let url = this.endPoint + '/transaction';
   if(uid !== undefined){
     url += '/' + uid;
   }
   return this._httpRequest('GET',url,this._buildAuthHeader(),null).map((response)=>{
     if(response['body'] && uid === undefined){
       return <any>response['body'].map((transaction)=>{return new Transaction(transaction);});
     }else if(response['body']){
       return new Transaction(response.body);
     }
   });
 }

And then it's implementation in my BuddyService:

  constructor(private ApiService:ApiService,private cookie:CookieService) {
    this.checkCookie();
  }
  authenticate(username,password):void{
    this.ApiService.authenticate(username,password).subscribe((response)=>{
      if(!response['error']){
        this.ApiService.token = response.token;
        this.cookie.set('auth_token',this.ApiService.token);
        this.checkCookie();
      }else{
        console.log(response);
      }
    });
  }
  checkCookie():void{
    if(this.cookie.check('auth_token')){
      this.ApiService.token = this.cookie.get('auth_token');
      this.ApiService.verifyToken().subscribe((response)=>{
        if(!response['error']){
          this.init();
        }else{
          // console.log(response);
        }
      });
    }
  }
  init():void{
    this.ApiService.getTransaction(undefined).subscribe((data)=>{console.log(data);this.transactions = data;});
  } 

When this is served and the page is loaded, everything functions as expected. Except that each call to the API is actually 2 calls, and OPTIONS request, followed by my real request causing in the example above this.transactions to always be undefined before it is ever filled. What am I doing wrong here? How can I subscribe to the result of the real request and not the OPTIONS request?

Thansk in advance!

EDIT:

 getTransaction(uid:number):Observable<Transaction[]>{
   let url = this.endPoint + '/transaction';
   if(uid !== undefined){
     url += '/' + uid;
   }
   let req = new HttpRequest(
     'GET',
     url,
     {
       headers:new HttpHeaders({'auth_token':this.token});
     }
   );
   return this.http.request(req).map((response)=>{
     console.log(response);
   });
 }

After slimming down to a more barebones version of my problem I am still seeing the same results. console.log(response); will first render {type:0} on the preflight and an HttpResponse on the true request.

I feel like this issue must effect everyone who makes cross-origin requests?

Answer 1

OPTIONS请求是CORS的飞行前请求