Basic Authentication Angular2 (Not CORS)

Question

I am currently trying to call a jersey REST API that I have running locally on localhost:8080 through Angular 4 using HttpClient.

My Code: ```

ngOnInit() {
    const headers = new HttpHeaders();
    headers.append('Authorization', 'Basic ' + btoa('username:password'));
    headers.append('Content-Type', 'application/json');

    this.http.get('http://localhost:8080/mycall?myparam=myvalue', {headers: headers}).subscribe(data => {
      console.log(data);
    });
  }

```

When I make this call I get a 401 error saying that I am Unauthorized. However, when I run this through postman it goes through just fine. What am I doing wrong here?

NOTE: this is not a CORS issue, I am currently allowing CORS through an extension on firefox

Use you browser dev tools. Go under Network tab and see what are the headers that ur api is really sending. — yash_DedSec
– yash_DedSec, Commented Feb 23, 2018 at 10:57

David · Accepted Answer · 2018-02-23 10:01:58Z

2

HttpHeaders are immutable, so you need to do something like that

ngOnInit() {
    const headers = new HttpHeaders()
    .append('Authorization', 'Basic ' + btoa('username:password'))
    .append('Content-Type', 'application/json');

    this.http.get('http://localhost:8080/mycall?myparam=myvalue', {headers: headers}).subscribe(data => {
      console.log(data);
    });
  }

Actually you should not need the Content-type here for a GET request

answered Feb 23, 2018 at 10:01

David

34.6k13 gold badges90 silver badges124 bronze badges

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

6 Comments

M. Barbieri Over a year ago

Beautiful, thank you. I had no idea that HttpHeaders is immutable @David

M. Barbieri Over a year ago

Do you know of any way to not provide the request with the username and password, and let the browser trigger the login? @David

David Over a year ago

@M. Barbieri I don't think it's possible with ajax calls

M. Barbieri Over a year ago

You mean its not possible with the Angular HttpClient, because its definitely possible with ajax, all you have to do is leave the authentication out @David

David Over a year ago

@M. Barbieri I actually though it was not possible with ajax itself

|

woodykiddy · Accepted Answer · 2018-02-23 02:36:16Z

1

I think the issue is that you haven't passed in your custom request headers to HttpClient, which is causing the unauthorised error.

Please try something like this.

const headers = new HttpHeaders();
headers.append('Authorization', 'Basic ' + btoa('username:password'));
headers.append('Content-Type', 'application/json');
const options = new RequestOptions({headers: headers});

this.http.get('http://localhost:8080/mycall?myparam=myvalue', options ).subscribe(data => {
  console.log(data);
});

You can simply pass in your RequestOptions to http.get as it does accept headers as an optional parameter. Please check following link for more details on the usage.

https://angular.io/api/common/http/HttpClient#get

Also, remember to import RequestOptions as well.

answered Feb 23, 2018 at 2:36

woodykiddy

6,48518 gold badges66 silver badges107 bronze badges

3 Comments

M. Barbieri Over a year ago

sorry I updated the question, so that is how I originally had it @woodykiddy

M. Barbieri Over a year ago

Also, please note that RequestOptions is deprecated @woodykiddy

woodykiddy Over a year ago

@M.Barbieri you obviously could use the anonymous object instead of instantiating RequestOptions object, like const options = {headers: headers}, but don't think it'd matter though if you still getting 401 error. Have you checked the btoa() actually returns the correct value?

Collectives™ on Stack Overflow

Basic Authentication Angular2 (Not CORS)

2 Answers 2

6 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Related