为什么我的 Web 应用程序 (ReactJS) 不接受后端发送的 cookie？

Question

我有一个用 ReactJS 制作的前端 Web 应用程序，以及一个用 HapiJS 制作的后端。后端在 http://localhost:3000 上运行，前端在 http://localhost:1234 上运行。

我正在尝试实现基于 cookie 的身份验证。在我的前端，我正在使用 Axios 进行登录请求（我希望在其中获取 cookie）。

在我的后端，我已经有了这样设置 cookie 的代码（我设置第二个 cookie 只是为了测试）：

//Config for user session cookie
server.auth.strategy('session', 'cookie', {

    cookie: {
        name: 'sid-example',
        isSameSite: 'None',
        path: '/',
        password: 'password-should-be-32-characters',
        isSecure: false,
        isHttpOnly: false
    },
    ...
}

//Config for a normal cookie
server.state('data', {
    ttl: null,
    isSecure: false,
    isHttpOnly: false,
    encoding: 'base64json',
    clearInvalid: true,
    strictHeader: true,
    isSameSite: 'None',
    path: '/'
});

//In my route's code where authentication takes place
//Set user session cookie
request.cookieAuth.set({ uuid });
//Set normal cookie
h.state('data', { foo: 'bar' });

当我发出请求（登录尝试）时，我可以在 Chrome 开发工具 -> 网络选项卡中看到 cookie 已设置并作为响应的一部分出现。在开发中，我没有将 cookie 设置为 httpOnly true 也不安全，这可以在请求详细信息中看到。

但是，当我检查应用程序 cookie 时，我看不到它们。在开发工具的应用程序选项卡中，我可以看到 noo cookie（我已经刷新了选项卡）。

它检测到有 2 个 cookie 但未显示：

另外，如果我尝试使用 Axios 发出请求，期望 cookie 被发送回服务器（以授权请求），它们不会被发送（我在 Axios 中使用标志 withCredentials（如 @987654325 所述） @)。这也可以在“网络”选项卡中看到（在 cookie 列中显示发送的 cookie 的数量，而在“设置 cookie”中显示由服务器或网络应用程序设置的 cookie）。

此外，我已经禁用（出于测试目的）浏览器标记 #same-site-by-default-cookies 和 #cookies-without-same-site-must-be-secure，因为我没有通过 HTTPS 运行它.是否有任何我遗漏的东西阻止浏览器接受这些 cookie？

Answer 1

我不得不在后端使用这个设置：

• SameSite = '无'
• 安全 = 真

（对于本地主机，我猜 Secure=True 有效）

在客户端，除了在后续请求中包含withCredentials: true之外，我还必须在初始登录请求中包含它，否则浏览器不会考虑set-cookie响应中的标头。