0

I've been banging my head on this for the better part of a week and I'm finally issuing a call to the StackOverflow universe in hopes someone has encountered this issue before and can help me figure it out.

I am new to Angular2 and this is my first app with it. I am just trying to wire up to an api call to get a list of businesses. I have a search input field on a component that makes a call within a service. The call is continuously failing because I can't seem to pass the headers to the call with the proper authentication from the session token that I have. It always passes just with {"content-type": "application/json"}.

Here is the call on my service:

searchAllForTerm(term: string): Promise<Business[]> {
   let headers = new Headers();
   headers.append('Content-Type', 'application/json');
   let authToken = localStorage.getItem('token');
   headers.append('Authorization', `Bearer ${authToken}`);
   return this.http.get(this.businessesUrl + term, {headers})
     .toPromise()
     .then(this.extractData)
     .catch(this.handleError);
}

I have imported 

import { Http, Response, Headers} from '@angular/http';

on the file and set the constructor to 

constructor(private http: Http) {}

Still, when the call gets made the authorization is not in the header. Any ideas?

Lucy Barber
  • 21
  • 3
  • 1
    Hey have you seen this post: http://stackoverflow.com/questions/34464108/angular2-set-headers-for-every-request it may help. – Code Ratchet Mar 01 '17 at 23:49

1 Answers1

0

So I figured this out! I'd followed the Angular 2 tour of heroes tutorial to build the skeleton for my app. In that tutorial they have you build out a fake database locally to use as the api. Because I was trying to call that api, my attempt at calling the real api was throwing this strange unauthorized error response.

Lucy Barber
  • 21
  • 3