Angular 10应用程序不会在跨原点请求时发送JWT刷新令牌

Question

我们在同一台开发机器上的不同端口上有一个Angular前端和一个web服务。web服务被配置为允许从本地主机和Angular应用程序所在的端口进行访问。

我们使用JWT认证，它用于对web服务的初始认证。我们接收一个auth令牌并将其存储在Angular本地存储中，还接收一个刷新令牌，该令牌存储为一个设置了HttpOnly的cookie。目前，我们处于一个开发环境中，在这个环境中，SSL在客户端或web服务上都没有启用。

当我们的授权令牌过期时，问题就来了。我们的应用程序发送了一个更新令牌的请求，但是该请求没有刷新令牌cookie。

我们尝试在Angular中设置一个代理，将API请求从Angulal域转发到web服务。在这种情况下，刷新令牌cookie被转发到web服务，我们得到新的令牌。不幸的是，在构建和部署应用程序后，这将不起作用，我们需要能够在未启用SSL的环境中部署和开发。

下面是 Angular 应用程序中处理发送刷新令牌的相关代码。下面是在授权服务中调用的方法。

public refreshToken() {
    return this.http.post(this.appConfigService.getGrouperWebServiceUrl()+'/auth/refresh', {})
      .pipe(
        map((res: LoginResponse) => {
          this.setSession(res);
          return res;
        })
      );
}    

POST请求被Angular拦截器拦截。

intercept(req: HttpRequest < any > , next: HttpHandler):
    Observable < HttpEvent < any >> {
    // ... 
     
        if (req.url.indexOf('refresh') !== -1) {
            console.log("token interceptor: refresh");
            return next.handle(this.configureRefresh(req));
        }
    // ...    
}

configureRefresh(req: HttpRequest < any > ) {
    return req.clone({
        withCredentials: true
    });
}

下面是使用 Angular 代理的刷新请求的原始请求，因此该请求似乎来自与 Web 服务相同的来源。请注意，刷新令牌 cookie 包含在请求中。

POST /proxy/auth/refresh HTTP/1.1
Host: localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json
Content-Length: 2
Origin: http://localhost:4200
Connection: keep-alive
Referer: http://localhost:4200/userHome
Cookie: refreshToken=/*token redacted*/

下面是在没有代理的情况下刷新的原始请求。请注意，刷新令牌 cookie 不包含在请求中。

POST /auth/refresh HTTP/1.1
Host: localhost:8081
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json
Content-Length: 2
Origin: http://localhost:4200
Connection: keep-alive
Referer: http://localhost:4200/userHome

当我们进行跨源请求时，如何让refreshToken cookie包含在请求头中？

我们确实https://stackoverflow.com/a/46412839/8517076看到了这个响应，但似乎没有帮助。我们已经在Web服务中设置了推荐的标头。

Answer 1

您的localhost连接必须是安全的（https）。这是必需的！

您需要创建SSL证书并在Angular应用程序中使用，如此处所述。

就我而言，当我使用 SSL 证书重新启动我的 Angular 应用程序时，refresh_token会自动以请求标头发送（作为“cookie”属性）。