401 Unauthorized Error during token refresh API call

I'm a newbie at Angular 18 and I can`t solve the implementation of refresh tokens, my backend is OK at PostMan works OK, with a curl command it's OK too, I send the header with a refresh token and the backend responses with an object with an accessToken that works ok too, but when I use the frontend the error is a 401! Please help me, and thanxs a lot!

This is the Interceptor

export const customInterceptor: HttpInterceptorFn = (req, next) => {
const excludedRoutes = ['/login']; // Customizable array
const shouldExclude = excludedRoutes.some(route => req.url.includes(route));
const authService = inject(AuthService);

if (shouldExclude) {
return next(req);
}

const token = authService.getAuthToken();
const cloneRequest = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});

return next(cloneRequest).pipe(
catchError((error) => {
if (error.status === 401) {
console.log("From the interceptor, here is the error: " + error.status);
return authService.refreshToken().pipe(
switchMap((res) => {
localStorage.setItem('authToken', res.accessToken);
console.log("From the interceptor, the new authToken is: " + res.accessToken);
const newReq = req.clone({
setHeaders: {
Authorization: `Bearer ${res.accessToken}`
}
});

return next(newReq);
}),
catchError((refreshErr) => {
const finalError = new Error(refreshErr);
console.log("Error refreshing the token", finalError);
authService.logout();
return throwError(() => new Error('Session expired, please log in again'));
})
);
} else {
// Handle other errors (e.g., network errors)
return throwError(() => error);
}
})
);
};


This is the service method:

refreshToken() {
const refreshToken = localStorage.getItem('refreshToken');
console.log("The refreshToken inside the method is: " + refreshToken);

if (!refreshToken) {
throw new Error('Refresh token missing');
}

console.log("Sending refresh token to backend: " + refreshToken);

return this._httpClient.post<any>(`${this.baseURL}/refresh`, {}, {
headers: {
Authorization: `Bearer ${refreshToken}`
}
}).pipe(
catchError((error) => {
console.error("Refresh token error:", error);
return throwError(() => new Error("Refresh error"));
})
);
}

Continue reading...