未使用 RTK fetchBaseQuery 和 cors 在浏览器中设置 Cookie

Question

我有一个 PERN 堆栈应用程序，我试图在登录时发送 cookie，但即使它是在响应中发送的，它也没有在浏览器中设置。 我在前端使用 RTK 查询，并像这样设置 fetchBaseQuery :

export const baseQuery = fetchBaseQuery({
  baseUrl: process.env.REACT_APP_API_URL,
  prepareHeaders: headers => {
    headers.set(
      'Authorization',
      `Bearer ${sessionStorage.getItem('accessToken')}`
    );
    headers.set('Content-Type', 'application/json');
    headers.set('Accept', 'application/json');

    return headers;
  },
  credentials: 'include',
});

在后端，我使用带有cors的express：

app.use(cors({ origin: process.env.APP_BASE_URL, credentials: true }));

当我发送回复时，我会这样发送：

response.cookie('refreshToken', refreshToken, jwtService.cookieOptions).json({
        bodyOfTheResponse,
      });

像这样设置 cookieOptions :

cookieOptions: {
    httpOnly: true,
    secure: true,
    sameSite: 'none',
    path: '/',
  } as CookieOptions,

浏览器很好地接收了cookie，我可以在响应头的Set-Cookie属性中看到它，但它没有被存储。

有人有想法吗？

谢谢

Answer 1

好吧，终于找到问题了。 对于 RTK 查询，我需要指定我使用 cors 模式，而不仅仅是将凭据指定为 true。 所以我需要这样的东西：

    export const baseQuery = fetchBaseQuery({
      baseUrl: process.env.REACT_APP_API_URL,
      prepareHeaders: headers,
      credentials: 'include',
      mode: 'cors',
    });