在本地开发 Web App 时设置 HttpOnly Cookies

Question

我正在开发一个带有 angular + nebular auth 的网络应用程序。 Nebular 身份验证正在工作，我从我们的身份验证服务器获得了一个 JWT 令牌。身份验证服务器是用 Node 制作的，并且还为刷新令牌设置了一个 HTTPOnly cookie。我希望这个令牌随每个请求一起发送。 登录响应确实具有 Set-Cookie 标头，但从未设置 cookie。我在 Stack Overflow 中阅读了很多答案，但我尝试的一切都不起作用。

身份验证服务器位于云服务器中，而我正在本地开发应用程序。这可能已经是个问题了。

无论如何，这是我到目前为止所做的：

Node.js

我正在使用 HTTP 服务器，并使用 cookie-parser 设置 cookie：

res.cookie("refresh_token", token, {httpOnly: true, maxAge: ....});

我在 app.js 中这样设置核心选项：

app.use(cors({
 credentials: true,
 origin: ["http://localhost:4200", "http://127.0.0.1:4200"]
 exposedHeaders = ["Content-Length", .....],
 allowedHeaders = ["Content-Type", "Authorization", "Set-Cookie", ....],
}));

当我得到登录的响应时，我确实得到了 Set-Cookie 标头，但我在浏览器控制台的 Cookies 选项卡中看不到 cookie。

无论如何，我都尝试使用 { headers: headers, withCredentials: true } 从 Angular 发送请求，但显然当我在 Node 中检查 cookie 时什​​么都没有。

所以我快疯了……这可能是 CORS 的问题，因为我是从 localhost 开发的，并且服务器在云端？

我怎样才能做到这一点？

Answer 1

所以我找到的初始解决方案只是简单地在 localhost 上运行 Node 服务器。服务器很轻，所以没问题，但这不是最好的解决方案。

我在 Angular 中用一个简单的本地代理解决了这个问题：

我在工作目录的根目录上创建了proxy.json

{
  "/api": {
    "target": "http://<server_ip>:3000",
    "secure": false
  }
}

然后在angular.json上添加这一行

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.json", // Added this
    "ssl": false
  },
  ...

我还需要创建一个 HttpInterceptor 来拦截 http 请求并将Access-Control-Allow-Credentials 标头添加到每个请求中。通常我还使用拦截器来添加项目所需的自定义标头，处理授权标头，并在身份验证令牌过期时调用刷新令牌 API。无论如何，最简单的拦截器是这样的：

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

import { Observable } from 'rxjs';

/** Inject With Credentials into the request */
@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    
      req = req.clone({
        withCredentials: true
      });
      
      return next.handle(req);
  }
}

终于上我的environment.ts

export const environment = {
  app_name: "<app_name_dev>",
  production: false,
  api_path: 'http://localhost:4200/api',
};

所以现在使用 environment.api_path 作为调用我的身份验证 API 的基本路径与 CORS 一起正常工作，并且我得到了我的 HTTP Only Cookie。