HTTPOnly Cookie 未在浏览器 localhost 中设置

Question

问题我有一个具有登录端点的 REST API。登录端点接受用户名和密码，服务器通过发送包含一些有效负载（如 JWT）的 HTTPOnly Cookie 进行响应。我一直使用的方法已经工作了几年，直到Set-Cookie标题在上周停止工作。由于我正在开发基于 Svelte 的前端，因此我在 REST API 无法使用之前没有接触过它的源代码。我怀疑它与在 localhostSecure中设置的属性有关。false但是，根据Using HTTP cookies，只要它是本地主机，就可以使用不安全的连接。一段时间以来，我一直在以这种方式开发 REST API，并且惊讶地发现不再设置 cookie。使用 Postman 测试 API 会产生设置 cookie 的预期结果。

Answer 1

我刚刚遇到了同样的问题axios，这导致Set-Cookie响应标头被静默忽略。这很烦人，如果它拒绝它们，它会在该标题上显示那个小黄色三角形，并在网络检查器中说明原因。

我通过添加一个请求拦截器来true为每个请求强制它来解决这个问题：

axios.interceptors.request.use(

    (config) => {

      config.withCredentials = true

      return config

    },

    (error) => {

      return Promise.reject(error)

    }

  )

Answer 2

解决方案

原来问题出在前端，特别是 JavaScript 的fetch()方法。

let response = await fetch(`http://localhost:8000/login`, {

                method: "POST",

                credentials: "include", //--> send/receive cookies

                body: JSON.stringify({

                    email,

                }),

                headers: {

                    "Content-Type": "application/json",

                },

            });

您将需要对象credentials: include中的属性RequestInit，不仅用于发出需要 cookie 身份验证的请求，还用于接收所述 cookie。

Axios 通常会自动填写这部分（根据经验），但如果没有，您还需要withCredentials: true在请求的第三个config参数中添加以允许浏览器设置 cookie。