在Angular 6中将标头添加到http.get

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

收到错误消息是因为您需要将URL作为get的第一个参数。

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

Answer 2

角的ansible-playbook installer.yml --extra-vars '{"packages":[curl, python3-pip]}'需要两个参数，URL和选项。您将它们传递为1，这会导致此问题！下面是我经常在角7添加自定义页眉到我的服务：

http.get()

您也可以选择传递整个对象，而不是在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'
  })
};

我经常发现Angular文档有很好的例子-Angular HTTP Guide - Adding Headers

Answer 3

基于documentation，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);
  }
}

测试它有效