我如何在 Typescript 和 angular 2 中将 Headers 添加到 http.get 或 http.post？

Question

getHeroes (): Observable<Heros[]> {
    return this.http.get(this.heroesUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }

我在哪里添加 headers 以及如何添加？寻找一个简单的例子。

Answer 1

您可以使用 HTTP key/value 对的字典定义一个 Headers 对象，然后将其作为参数传递给 http.get() 和 http.post()，如下所示：

const headerDict = {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Access-Control-Allow-Headers': 'Content-Type',
}

const requestOptions = {                                                                                                                                                                                 
  headers: new Headers(headerDict), 
};

return this.http.get(this.heroesUrl, requestOptions)

或者，如果是 POST 请求：

const data = JSON.stringify(heroData);
return this.http.post(this.heroesUrl, data, requestOptions);

从 Angular 7 起，您必须使用 HttpHeaders class 而不是 Headers:

const requestOptions = {                                                                                                                                                                                 
  headers: new HttpHeaders(headerDict), 
};

Answer 2

如果遇到无法在移动浏览器或移动应用程序中工作的 CORS 问题，你可以在后端服务器中设置 ALLOWED_HOSTS = ["your host ip"] 你的其余部分 api 存在，这里你的主机 ip 是外部 ip 来访问 ionic ，比如 External: http://192.168.1.120:8100

之后在 ionic type 脚本中制作 post 或使用后备服务器的 IP

在我的例子中，我使用了 django rest framwork 并且我启动了服务器：- python manage.py runserver 192.168.1.120:8000

并在 ionic get 和 post 休息调用中使用此 ip api

Answer 3

我在 Angular 9 中使用了以下代码。请注意，它使用的是 http class 而不是正常的 httpClient.

所以从模块中导入Headers，否则Headers会被typescript误认为headers接口，给出错误

从“@angular/http”导入{Http，Headers，RequestOptionsArgs}；

并在您的方法中使用以下示例代码并将其分解为了更容易理解。

let customHeaders = new Headers({ Authorization: "Bearer " + localStorage.getItem("token")});
const requestOptions: RequestOptionsArgs = { headers: customHeaders };
return this.http.get("/api/orders", requestOptions);

Answer 4

这样我就可以调用 MyService

private REST_API_SERVER = 'http://localhost:4040/abc';
public sendGetRequest() {
   var myFormData = { email: 'abc@abc.com', password: '123' };
   const headers = new HttpHeaders();
   headers.append('Content-Type', 'application/json');
   //HTTP POST REQUEST
   this.httpClient
  .post(this.REST_API_SERVER, myFormData, {
    headers: headers,
   })
  .subscribe((data) => {
    console.log("i'm from service............", data, myFormData, headers);
    return data;
  });
}

Answer 5

确保声明 HttpHeaders 时不带空值。

    this.http.get('url', {headers: new HttpHeaders({'a': a || '', 'b': b || ''}))

否则，如果您尝试向 HttpHeaders 添加 null 值，将会报错。

我如何在 Typescript 和 angular 2 中将 Headers 添加到 http.get 或 http.post？

How I add Headers to http.get or http.post in Typescript and angular 2?

angular2-services