How to append custom fields to HTTP Request header using Request class

Question

How to append custom fields to HTTP Request header using Request class in Angular2? I found posts which solve similar problems, but they don't use Request class.

My code is the below.

let headers: Headers = new Headers();
headers.append('foo', 'bar');

let req: any = {
  method : RequestMethod.Get,
  url    : '/test.json',
  headers: headers,
};

// this.http is Http instance variable.
this.http.request(new Request(req)).map((res: any) => res.json());

This is very simple code. But when executing this, I couldn't find custom fields in HTTP request header using Developer Tools of Google Chrome.

Referenced: https://angular.io/docs/js/latest/api/http/index/Request-class.html

It's possible to reproduce this issue. The below code should get XHR 400 errors, but it's not problem. But note that the request header don't have custom fields.

http://plnkr.co/edit/arCFx69V9H1Cl0pJXBzO?p=preview

Sorry, the cause is in server side processing. I've already solved. — Yohsuke Inoda
– Yohsuke Inoda, Commented May 7, 2016 at 12:58

Thierry Templier · Accepted Answer · 2016-05-04 05:49:58Z

6

You probably forgot to import the Headers class:

import {Http, Headers, ...} from 'angular2/http';

You could also use the following code:

let headers: Headers = new Headers();
headers.append('foo', 'bar');

this.http.get('test.json', { headers }).map((res: any) => res.json());

Moreover don't forget to subscribe on the returned observable to execute the request since observables are lazy:

let headers: Headers = new Headers();
headers.append('foo', 'bar');

this.http.get('test.json', { headers })
  .map((res: any) => res.json())
  .subscribe((data) => {
    console.log(data);
  });

edited May 4, 2016 at 5:49

answered May 4, 2016 at 5:47

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

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

6 Comments

Yohsuke Inoda Over a year ago

Thank you. Of course, I wrote it and completed to transpile TypeScript files without errors. But this doesn't work....

Thierry Templier Over a year ago

Do you subscribe on the request observable? I updated my answer.

Yohsuke Inoda Over a year ago

Yes, I subscribed it. But I couldn't find to append custom fields to request header in Developer Tools.

Yohsuke Inoda Over a year ago

ah, I want to use http.request instead of http.get or http.post , therefore I must use Request class.

Thierry Templier Over a year ago

Which version of Angular2 do you use?

|

Collectives™ on Stack Overflow

How to append custom fields to HTTP Request header using Request class

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related