Request working with Postman but with Angular returns 401

Question

Here's my angular method

getGiftList(url: string){
let q = this.baseUrl + url;
let headers = new HttpHeaders();
let authToken = 'Bearer ' + this.authService.currentUser.token;

console.log(q); //Log the url ...
console.log(authToken); Log the token ...

headers.set('Authorization', authToken)

return this.http.get(q, {
  observe: 'response' 
  ,headers: headers
})

}

And this is the Asp.net core method

[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
public class GiftController : Controller
{
    [HttpGet("api/giftsByGiver/{email}")]        
    public IActionResult getGiftBasicRecordsByGiver(string email, int cpg = 1)
    {
       //
    }
}

When I make a request from my angular code, I get a 401 error. However, when I copy/peste the same values that I logged to Postman and run, I'm getting the right result.

Am I missing something?

Thanks for helping

Answer 1

HttpHeaders is immutable. Calling set() doesn't mutate it. It returns a new instance of HttpHeaders. So you need

headers = headers.set('Authorization', authToken);

Or simpler, if you change the order of your instructions:

const authToken = 'Bearer ' + this.authService.currentUser.token;
const headers = new HttpHeaders().set('Authorization', authToken);

You should verify your assumptions: just open the network panel of your browser dev tools, and check if what you're sending is what you think you're sending.