使用 POST 请求在 Nest JS 中设置 cookie (ViteJs + REACT JS)答案

【问题标题】：Set a cookie in Nest JS using POST request (ViteJs + REACT JS)使用 POST 请求在 Nest JS 中设置 cookie (ViteJs + REACT JS)
【发布时间】：2022-12-10 16:29:25
【问题描述】：

我正在使用 nest js 并希望在用户点击特定端点时设置 cookie：

@Get()
setCookiesApi(@Res({ passthrough: true }) response:Response) {
  response.setCookie('key', 'value')
}

此代码有效，cookie 设置在 Chrome 中 Application 选项卡的 cookies 存储中。如果我尝试使用 post 设置 cookie：

@Post()
setCookiesApi(@Res({ passthrough: true }) response:Response) {
  response.setCookie('key', 'value')
}

我在 UI 上的代码：

  try {
      const response = await axios.post(
        `http://localhost:3000/api/v1/hello`,
        user,
        {
          method: 'post',
          headers: {
            withCredentials: true,
          },
          data: user,
        },
      );
      if (response.data) {
        // sss
      }
    } catch (err) {
      if (err instanceof AxiosError) {
        if (err.response) {
          toast.error(err.response.data.message);
        }
      }
    }

main.js 文件

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('api/v1');
  app.useGlobalPipes(new ValidationPipe());
  app.use(cookieParser());
  app.enableCors({ origin: 'http://127.0.0.1:5173', credentials: true });
  await app.listen(3000);
}
bootstrap();

...然后 cookies 存储为空且未设置 cookie。
问题：为什么get 请求有效但post 无效，如何解决？

【问题讨论】：

你如何提出要求？
@Konrad，我在我的问题中添加了一个简短的代码。
这回答了你的问题了吗？ Make Axios send cookies in its requests automatically
@Konrad，我将 Vite 网址更改为 http://localhost:5173/，它可以正常工作，但不能与 http://127.0.0.1:5173/ 一起使用
这是出乎意料的，我不知道。您可以问另一个问题，例如“为什么 cookie 对localhost有效，但对127.0.0.1无效？”，您可能会获得更多关注并得到答案

标签： node.js cookies nestjs

【解决方案1】：

我认为 GET 请求有效，因为它是一种允许从服务器检索数据的 HTTP 方法，setCookie() 方法用于在响应中设置 cookie。

POST 请求不起作用，因为 POST 通常用于在服务器上创建或修改数据，而 setCookie() 方法并非设计用于处理数据修改。

【讨论】：

所以没有办法使用post请求设置cookies？
@Asking 也应该与 post 请求一起使用
@Konrad，我在我这边测试过，但没有用。
@Konrad，如果我在 http 而不是 https 上有关系吗？我在我的本地环境中，使用 Vite 来反应 js 和嵌套 js。

【解决方案2】：

它也适用于 POST 方法。尝试类似这样的事情：

@Post()
setCookiesApi(@Res({ passthrough: true }) response:Response) {
  response.setHeader('Set-Cookie', cookie);

  return response.send();
}

【讨论】：

我检查了Aplication/Storage/Cookies，什么也没有。它没有出现。
@Asking 你在main.ts中使用过app.use(cookieParser())中间件吗？
，是的，我还用一些细节更新了我的问题。你能帮忙吗？
我还注意到该 cookie 存储在 Chrome 中请求的Cookies 选项卡中，但未存储在 Application/Storage/Cookies 中