Correct request from angular 18 with bearer token is getting null header in spring

I have my angular project working. In step 1, I'm able to login and get the token from my spring boot application. I save this token to localstorage. This request is posible because is not blocked by authentication.

The problem is when I want to do a request with Bearer token. My Angular app send a request with, appearently, a correct header, but my Spring app it is not able to detect it. The most surprising is that if I call the same request with Postman, it works fine.

First of all, I'm using these versions:

• Angular: 18.2.8
• rxjs 7.8.1
• typescript 5.5.4
• zone.js 0.14.10
• Spring boot 3.3.4

One of examples calls from Angular is this (test function):

component.ts

test() {
this.userService.getUserByUsername('user').subscribe({
next: (data:any) => {
console.log(data);
},
error: (err) => console.log('Fail', err)
})
}


user.Service.ts

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

url: string;
constructor(private http:HttpClient) {
this.url = environment.domainUrl + '/users';
}

public getUserByUsername(username:string): Observable<any> {
return this.http.get(`${this.url}/username/${username}`).pipe(
tap((response:any) => {
if(response.user){
console.log(response.user)
}
})
);
}

}


auth.interceptor.ts

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
console.log("Intercepting Requests");
const authService = inject(AuthService);
const token = authService.getToken();
let authReq = req;

if (token) {
authReq = req.clone({
setHeaders: {
Authorization:'Bearer ' + token
}
});
console.log("Token added to request:", token);
console.log(authReq);
} else {
console.log("No token found");
}

return next(authReq);
};


Now, we can see the browser console. One of the requests:

If we search the request headers, we can see it:

However, in Spring boot app I'm getting authHeader as a null.

snippet getToken

private String getTokenFromRequest(HttpServletRequest request) {
final String authHeader = request.getHeader(HttpHeaders.AUTHORIZATION);

if(StringUtils.hasText(authHeader) && authHeader.startsWith("Bearer "))
{
return authHeader.substring(7);
}
return null;
}


I have to clarify that if I use the same token in Postman, I get the correct response.

I'm very lost with that issue, I don't know what is happening. Thanks for your help.

Continue reading...