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

Question

我正在使用 angular + nebular auth 开发一个网络应用程序。 Nebular 身份验证正在运行，我从我们的身份验证服务器获得了一个 JWT 令牌。身份验证服务器是用 Node 制作的，并且还为刷新令牌设置了一个 HTTPOnly cookie。我希望这个令牌随每个请求一起发送。登录响应确实有 Set-Cookie header，但从未设置 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 header，但我在浏览器控制台的“Cookie”选项卡中看不到该 cookie。

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

所以我要疯了...这可能是 CORS 的问题，因为我是从本地主机开发的，而服务器在云端？

我怎样才能使这个工作？

Answer 1

所以我找到的最初解决方案只是运行本地主机上的节点服务器。服务器很轻，所以没问题，但这不是最好的解决方案。

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

我在 workdir

的根目录下创建了 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 header 添加到每个请求中。通常我还使用拦截器来添加项目所需的自定义 headers，处理授权 headers 并在身份验证令牌过期时调用刷新令牌 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 作为基本路径来调用我的身份验证 APIs 与 CORS 一起正常工作，我得到了我的 HTTP Only Cookie。

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

Set HttpOnly Cookies while developing Web App locally

cookies

cross-domain

node.js

angular