前端和后端分别部署（域）的 Cookie 的使用 [关闭]

Posted 2023-03-10

【中文标题】前端和后端分别部署（域）的 Cookie 的使用 [关闭]

【英文标题】：Usage of Cookies where Front end and Back end deployed separately (domain) [closed]

【发布时间】：2019-08-21 07:16:55

【问题描述】：

我研究了2天多没有找到解决办法。让我解释一下问题，

我有一个应用程序，其中 UI 使用 Angular 7 实现，后端使用 Java Spring。

它们都分别部署在不同的域中。假设 Angular 应用部署在 ang.ui.com 中，Java 部署在 java.back.com 中。

所有都是 REST Api，包括登录。 Cookie 用于存储 JWT 令牌，而不是本地存储。 我已经从双方都包含了CORS配置并且能够成功登录。

由于两者是分开部署的，Java 应用程序在过滤时无法获取 JWT Cookie。

请帮助我我需要遵循什么方法。

【问题讨论】：

如果您研究了 2 天，那么您一定找到了一些替代方案。什么对你有用？ Cookie 将不起作用。您有一个 JWT 令牌，将其传递到标头中。

是的，另一种方法是使用本地存储存储它并使用Authorization 标头发送它。但是我正在搜索的是仅使用 Cookie 而不是 Authorization 标头

您不能在这种情况下使用 cookie。除非您将应用程序部署在同一个域中，否则 Cookie 将永远无法工作。

这就是我想知道的。谢谢。

【参考方案1】：

服务器将无法从前端读取 cookie，您必须在发送的每个 HTTP 请求中发送存储在 cookie 中的令牌，最好是在 Authorization 标头中。

一种方法是使用 Angular 拦截器。 让我们通过创建一个名为jwt.interceptor.ts的新文件来创建一个新的拦截器

我们的拦截器类将被称为JwtInterceptor，它必须实现Angular HttpInterceptor 接口。我们将通过添加@Injectable 注解使其可注入。

我们的类应该是这样的：

@Injectable()
export class JwtInterceptor implements HttpInterceptor 

现在我们必须实现intercept 方法，我们发送的每个http 请求都会执行该方法。它有一个HttpRequest 和一个HttpHandler 参数，它返回一个HttpEvent observable。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 

在此方法中，我们必须从 cookie 中读取令牌（假设它称为 jwtCookie）并添加到 HttpRequest 标头的 Authorization 部分。 假设您已经知道如何使用 cookie 服务，我将不再继续。 我们使用var token = cookie.get("jwtCookie"); 检索令牌 让我们验证 cookie 是否存在：if(token) 现在我们通过克隆请求对象并设置 Authorization 标头将我们的令牌添加到标头：

request = request.clone(
      setHeaders:  
           Authorization: `Bearer $token`
      
);

现在我们只需要调用并返回next.handle(request)来处理请求。

现在我们的类应该是这样的：

import  Injectable  from '@angular/core';
import  HttpRequest, HttpHandler, HttpEvent, HttpInterceptor  from '@angular/common/http';
import  Observable  from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor 
  intercept(request: HttpRequest<any>, next: HttpHandler):Observable<HttpEvent<any>> 
    var token = cookie.get("jwtCookie);
    if(token) 
      request = request.clone(
        setHeaders:  
           Authorization: `Bearer $token`
        
      );
    
    return next.handle(request);
  

现在我们必须通过编辑app.module.ts 文件来注入我们的拦截器 先导入类：import JwtInterceptor from './jwt.interceptor';

然后将以下对象添加到@NgModule注解中的providers数组中：

provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true

现在我们的令牌将被添加到我们的 Angular 应用程序发送的每个请求中，并且我们的 JAVA 服务器可以读取它。

【讨论】：

我已经尝试过了，它工作正常。忘记在问题中包含此内容。我的错。感谢您的回复。