将 Bearer 令牌添加到 header 未按预期工作

Question

为了试用 JJWT，我创建了一个 Spring-Boot back-end 和一个 Angular front-end，我整理了 back-end 并我卡在了 front-end.

所以基本上，我在登录过程完成时获取令牌，然后将其存储在 localStorage 中。

我创建了一个自定义 HttpInterceptor，其目的是将令牌添加到每个请求：

@Injectable()
export class JwtRequestInterceptor implements HttpInterceptor {

intercept(request: HttpRequest<any>, handler: HttpHandler): Observable<HttpEvent<any>> {
    return handler.handle(request.clone({
        setHeaders: {
            "Authorization": `Bearer ${localStorage.getItem("jwt")}`
        }
    }))
  }
}

然后我在 AppModule 中添加了这个拦截器作为 HTTP_INTERCEPTORS 的提供者：

{ provide: HTTP_INTERCEPTORS, useClass: JwtRequestInterceptor, multi: true }

问题是当我发出请求时（来自我的 front-end），该请求在浏览器的“网络”选项卡中显示两次，第一个请求具有 CORS 错误状态 - 授权 header 存在，第二个请求的状态为 403，但缺少授权 header。

Quick disclaimer, doing a request with Postman to the back-end with the token added in the header works without a problem

知道为什么吗？

Answer 1

您似乎没有在后端启用 CORS。
在这种情况下，您需要启用 CORS。
在这里查看如何在 Speing Security 中启用它： https://auth0.com/blog/spring-boot-authorization-tutorial-secure-an-api-java/#Enable-CORS-in-Spring-Boot

将 Bearer 令牌添加到 header 未按预期工作

Adding the Bearer token to the header doesn't work as expected

angular-http-interceptors

angular