Adding header to http.get in Angular 6

Question

I'm trying to modify the working example from deerawan to include header for another website that requires a header. I was given the solution below and it seems to work perfectly. But when I add subscribe(), it still works, but I get exception in console:

What should I do to fix this warning message? Thank you.

Original code:

export class UserService {

  private serviceUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUser(): Observable<User[]> {
    return this.http.get<User[]>(this.serviceUrl);
  }
}

Solution code:

export class NWSForecast {
  private config = {
    headers: {
      'User-Agent' : 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36'
    }
  };

  private serviceUrl = 'https://api.weather.gov/gridpoints/OKX/36,38/forecast';

  constructor(private http: HttpClient) { }

  getUser(): Observable<any>  {
    // first argument is URL, put config as second argument
    return this.http.get<any>(this.serviceUrl, this.config);
  }
}

Modified solution in order to capture response. But it has exception:

export class AppComponent {
  private config = {
    headers: {
      'User-Agent' : 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36'
    }
  };
  weathers: any;
  private serviceUrl = 'https://api.weather.gov/gridpoints/OKX/36,38/forecast';

  constructor(private http: HttpClient) { }

  getWeather() {
    this.http.get<Weather>(this.serviceUrl, this.config).subscribe(
      val => {
        this.weathers = val;
      console.log('this.weather ====> ', this.weathers);
      });
    }
}

The error message in console: Refused to set unsafe header "User-Agent" http.js:1436

What is unclear from the error message? Did you read angular.io/guide/http? — jonrsharpe
– jonrsharpe, Commented Feb 2, 2019 at 0:08

Wrokar · Accepted Answer · 2019-02-01 22:59:26Z

1

You are getting the error because you need to provide the URL as the first parameter to get.

 this.http.get<Weather>(url, this.config);

answered Feb 1, 2019 at 22:59

Wrokar

9737 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sofly · Accepted Answer · 2019-02-01 23:26:40Z

Angular's http.get() takes 2 arguments, URL and options. You're passing them as 1 which causes this issue! Here is how I often add custom headers to my services in Angular 7:

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class NWSForecast {
  private headerObj = new HttpHeaders({'User-Agent' : 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36'})

  private serviceUrl = 'https://api.weather.gov/gridpoints/OKX/36,38/forecast'

  constructor(private http: HttpClient) { }

  getUser(): Observable<Weather>  {
    console.log(this.http.get<Weather>(this.config));
    return this.http.get<Weather>(this.serviceUrl, {headers: this.headerObj});
  }
}

You could also choose to pass an entire object instead of specifying the headers parameter in http.get():

const httpOptions = {
  headers: new HttpHeaders({
    'User-Agent' : 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36'
  })
};

And then your return would be:

return this.http.get<Weather>(this.serviceUrl, httpOptions);

I often find that the Angular documentation has pretty good examples - Angular HTTP Guide - Adding Headers

deerawan · Accepted Answer · 2019-02-01 23:27:36Z

1

Based on documentation, the first parameter of HttpClient.get is url and the second one is the configuration.

So, your code is supposed to be like below:

export class NWSForecast {
  private config = {
    headers: {
      'User-Agent' : 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36'
    }
  };

  private serviceUrl = 'https://api.weather.gov/gridpoints/OKX/36,38/forecast';

  constructor(private http: HttpClient) { }

  getUser(): Observable<any>  {
    // first argument is URL, put config as second argument
    return this.http.get<any>(this.serviceUrl, this.config);
  }
}

Tested that it works

answered Feb 1, 2019 at 23:27

deerawan

8,5035 gold badges46 silver badges51 bronze badges

Collectives™ on Stack Overflow

Adding header to http.get in Angular 6

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related