添加报头,以在角6 http.get

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了添加报头,以在角6 http.get相关的知识,希望对你有一定的参考价值。

我试图修改从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

答案

因为你需要提供的网址为get第一个参数你所得到的错误。

 this.http.get<Weather>(url, this.config);
另一答案

角的http.get()需要两个参数,URL和选项。你将它们作为1这将导致这个问题!下面是我经常在角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});
  }
}

你也可以选择传球而不是指定在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 HTTP Guide - Adding Headers

另一答案

基于documentationHttpClient.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);
  }
}

经测试,它的工作原理

enter image description here

以上是关于添加报头,以在角6 http.get的主要内容,如果未能解决你的问题,请参考以下文章

在地图片段上添加按钮以在地图上执行操作

从图库中获取图像以在片段中的图像视图中设置? [复制]

想要使用片段从导航抽屉活动移动到另一个屏幕,以在所有屏幕上显示抽屉

支付成功后如何调用函数?在角

从firebase检索图像以在片段中的回收器视图时出错

在角材料设计中调整 sidenav 的大小。