Добавление заголовка к http.get в Angular 6

Question

Я пытаюсь изменить рабочий пример с deerawan, чтобы включить заголовок для другого веб-сайта, для которого требуется заголовок.Мне дали решение ниже, и это, кажется, работает отлично.Но когда я добавляю subscribe(), он все еще работает, но в консоли появляется исключение:

Что мне нужно сделать, чтобы исправить это предупреждение?Спасибо.

Оригинальный код:

export class UserService {

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

  constructor(private http: HttpClient) { }

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

Код решения:

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

Модифицированное решениедля того, чтобы захватить ответ.Но есть исключение:

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

Сообщение об ошибке в консоли: Refused to set unsafe header "User-Agent" http.js:1436

Answer 1

Angular's http.get() принимает 2 аргумента, URL и опции.Вы передаете их как 1, что вызывает эту проблему!Вот как я часто добавляю пользовательские заголовки к своим службам в 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});
  }
}

Вы также можете выбрать передачу всего объекта вместо указания параметра headers в 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'
  })
};

И тогда ваш ответ будет:

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

Я часто нахожу, что документация по Angular имеет довольно хорошие примеры - Руководство по Angular HTTP - Добавление заголовков

Answer 2

На основании документации первый параметр HttpClient.get - это url, а второй - конфигурация.

Итак, ваш код должен выглядеть примерно так:

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

Проверено, что он работает

Answer 3

Вы получаете сообщение об ошибке, потому что вам нужно предоставить URL в качестве первого параметра для get.

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