如何从单独的服务器将 cookie 设置为下一个 js 应用程序？

Question

我有 neXt.js 应用程序，我正在将所有请求发送到我的 neSt.js 服务器，但是当我尝试 auth cookie 时却没有保存在我的浏览器中。

我对服务器的请求：

export async function login(data) {
  const headers = new Headers();
  headers.set("Content-Type", "application/x-www-form-urlencoded");

  const response = await fetch(`${process.env.API_URL}/auth/sign-in`, {
    method: "POST",
    headers,
    body: new URLSearchParams({ ...data, username: data.email })
  });

  if (response.ok) {
    return {
      access_token: await response.json()
    };
  } else {
    return null;
  }
}

控制器：

@UseGuards(LocalAuthGuard)
  @Post("sign-in")
  async login(@Req() req: IReq, @Res() res: Response<string>): Promise<void> {
    const tokens = await this.authService.createTokens(req.user);
    
    res.cookie("refresh_token", tokens.refresh_token, {
      httpOnly: true,
      maxAge: 1000 * 60 * 60 * 24 * 30,
      signed: true
    });

    res.json(tokens.access_token).status(201);
  }

如果我向邮递员提出请求，我有 cookie。

我还需要提供哪些其他代码？您需要一个最小的工作示例吗？

Answer 1

Fetch 默认不保存 cookie。您应该使用credentials: 'same-origin' 选项来保存cookie。

  const response = await fetch(`${process.env.API_URL}/auth/sign-in`, {
    method: "POST",
    headers,
    credentials: 'same-origin', // <- add this to store cookies
    body: new URLSearchParams({ ...data, username: data.email })
  });