Not able to send Username and Password in Angular http request headers

Question

I need to send username and password as request headers (not query parameters) in a HTTP request.

I have the following get method written inside an Angular service.

 http.get() {
    let headers_object = new HttpHeaders();
    headers_object.append('username', 'Test');
    headers_object.append('password', 'Test123');

    const httpOptions = {
        headers: headers_object
    };
    const uri = 'http://localhost:8083/test';
    let res;
    this.http.get(uri, httpOptions)
    .pipe(map(data => data)).subscribe(result => {
        console.log(result);
        res = result;
    });
    return res;
}

Any help in this direction will be much appreciated.

Thanks!

Thanks @Bharat. It is for sending query params, any idea about sending them as request headers. — Ghan
– Ghan, Commented Jan 17, 2019 at 13:45
Think it's easier to use post-Request instead of Get and send them in body — Michi
– Michi, Commented Jan 17, 2019 at 14:14
You should not send password and username as a password. It is insecure and bad practice. but If u really care ... read about setting custom headers — bereket gebredingle
– bereket gebredingle, Commented Jan 17, 2019 at 14:28

Edric · Accepted Answer · 2019-01-17 14:29:21Z

1

Since HttpHeaders is immutable (definition of an immutable object below:),

An immutable object is an object whose state cannot be modified after it is created. - What are mutable and immutable data structures?

this means that you can only set it once within the same instance.

See below for an example:

let headers_object = new HttpHeaders()
  .set('username', 'Test')
  .set('password', 'Test123');

answered Jan 17, 2019 at 14:29

Edric

27.2k13 gold badges88 silver badges97 bronze badges

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

4 Comments

Vishal Over a year ago

Nice explanation man! I believe thats the reason the approach I suggested works as well. And that also means to use append we need to do so at same time while creating new HttpHeaders().append(...) ...? Whats your thought on this?

Edric Over a year ago

IMO, it's a bit troublesome to keep on chaining methods. :) (Although you can set the initial headers in the HttpHeaders constructor: angular.io/api/common/http/HttpHeaders#constructor())

Vishal Over a year ago

Cheers mate! That's awesome.

Edric Over a year ago

@VishalGulati Thanks! 🎉

Vishal · Accepted Answer · 2019-01-17 14:30:07Z

1

Its strange to be honest. The code looks fine and should have worked. To debug, could you try printing the headers object ins console and share what you see there?

Furthermore, Give the below way a shot:

headers: new HttpHeaders({
  'username':  'Test',
  'password': 'Test123'
})

answered Jan 17, 2019 at 14:30

Vishal

11k22 gold badges90 silver badges136 bronze badges

1 Comment

Ghan Over a year ago

Thanks Vishal. I tried this and now it seems sending in the CORS headers(as this is a CORS request from one server to another) but response is not as expected. I mean it says the user is not authorized. although this user is valid and getting correct data in the same server where it already works.

Collectives™ on Stack Overflow

Not able to send Username and Password in Angular http request headers

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related