CODEWITHSUNDEEP
angularjwthttpclientrequest-headers
user29062502
user29062502

Reputation: 21

Angular HttpClient: Failled to set any Header in an Http Request

I just started to learn Angular (using Version 19). So far the work with HttpClient goes on quite well. I've tried all kinds of requests with my backend (which is a Spring Boot application), all successful.

The problem comes when I tried to put a JWT token into the header of a request for authentication. No matter I add a headers object directly in the request call, or add the header via an interceptor, it seems that the header is never really set. When I check the filter at backend, it always points out that the header is null.

I just followed the standard way to implement the Http communication.

My interceptor looks like this:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    const token = localStorage.getItem("JWT_Token");
    if (token) {
      const authReq = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
      return next.handle(authReq);
    }

    return next.handle(request);
  }
}

My Http request:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Book } from '../dto/book';

@Injectable({
  providedIn: 'root'
})
export class BookService {

  constructor(private http : HttpClient) { }

  private apiUrl = 'http://localhost:8080/book';

  getAllBooks() : Observable<Book[]> {
    return this.http.get<Book[]>(this.apiUrl + '/all'); 
  }

  getBookById(id : string) : Observable<Book> {
    return this.http.get<Book>(this.apiUrl + '?id=' + id); 
  }

}

[This is the breakpoint at the moment when the interceptor kicks in. It seems the content of the intended header already exists in the "lazyUpdate". However, it does not take effect. Finally at the backend, Spring filter tells that header of this incoming request is null] (https://i.sstatic.net/KnZLZqpG.png)

Upvotes: 0

Views: 67

Answers (1)

Henrik B&#248;gelund Lavstsen
Henrik B&#248;gelund Lavstsen

Reputation: 1633

When i do it i just use headers instead of setHeaders, maybe this will give you a bit of luck so basically like this:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    const token = localStorage.getItem("JWT_Token");
    if (token) {
      const authReq = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(authReq);
    }

    return next.handle(request);
  }
}

now that is probably the same. Also if you are using standalone components which is default in angular 19. When you provide http make sure you provide it with:

provideHttpClient(withInterceptorsFromDi())

else the injection does not happen. To test if you injection even runs. Just put console.log into the intercepter and see if it fires, if it doesn't you probably need to adjust your provideHttpClient

Upvotes: 0

Related Questions