jwt - Angular HttpClient: Failled to set any Header in an Http Request - Stack Overflow

admin管理员组

文章数量:1122832

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] (.png)

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)

• angular
• jwt
• httpclient
• request-headers

Share Improve this question Follow asked yesterday user29062502user29062502 1 New contributor user29062502 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 3

• How do you setup the HttpClient ? – Matthieu Riegler Commented yesterday
• In app.config.ts, I added two lines to providers: provideHttpClient(withInterceptorsFromDi()), {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}, – user29062502 Commented yesterday
• 1 The issue is solved. The above settings on angular is a bit old-style but basically correct. The real problem is on my backend, where I did not configure Spring Security to enable CORS. After that change, all becomes fine. Sorry for this question, and thank you all! – user29062502 Commented 1 hour ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签： jwtAngular HttpClient Failled to set any Header in an Http RequestStack Overflow