本地开发HttpOnly应用程序时设置developing

Question

我正在开发一个带有角+星云的web应用程序。Nebular正在工作，我从auth服务器获得了一个JWT令牌。auth服务器由Node组成，并为刷新令牌设置一个HTTPOnly cookie。我希望每个请求都能发送这个令牌。登录响应确实具有Set-Cookie头，但cookie从未设置过。我在Stack溢出中读到了很多答案，但我尝试过的一切都没有奏效。

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

不管怎么说，我到现在为止都是这么做的：

Node.js

我正在使用HTTP服务器，并使用以下内容设置cookie解析器的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 }发送来自角的请求，但很明显，当我在Node中查看cookie时，没有任何内容。

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

我怎么才能把这事做好？

Answer 1

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

我用一个简单的本地代理来解决这个问题：

我在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头添加到每个请求中。通常，我还使用一个Interceptor来添加我的项目所需的自定义标头，处理授权头，并在auth令牌过期时调用刷新令牌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。