无法从 nextjs (Reactjs) 中的 cookie 获取 XSRF-TOKEN

Question

我使用 Nextjs 创建了一个登录表单，后端使用 Laravel 8，我在 Laravel 中生成了一个 XSRF-TOKEN，然后将其设置在 cookie 上，我可以在 inspect element 中看到令牌>应用程序选项卡> cookie 部分，但我无法在获取请求中设置它以进行登录，我使用 redux 来存储我的数据，例如：产品、身份验证、购物车等

AuthAction.js代码：

export const LOGIN_AUTH = "LOGIN_AUTH";
export const LOGOUT_AUTH = "LOGOUT_AUTH";

export const HandleLogin = (data) => {
  return async (dispatch, getState) => {
    const getCsrf = await fetch("http://localhost:8000/sanctum/csrf-cookie");

    if (!getCsrf.ok) {
      throw new Error("Faild to set csrf token");
    }

    console.log("getCsrf", cookie.load("XSRF-TOKEN"));

    const response = await fetch("http://localhost:8000/api/app/user/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw Error("Login faild");
    }

    try {
      const responseData = await response.json();

      console.log("login", responseData);

      dispatch({
        type: LOGIN_AUTH,
        user: responseData,
      });
    } catch (err) {
      console.log("Login err", err);
      throw err;
    }
  };
};

console.log("getCsrf", cookie.load("XSRF-TOKEN")); 之后什么也没发生。我的代码哪里做错了？

cookie 截图：

请求响应：

Answer 1

由于您的 next.js 和 laravel 应用来自不同的来源，您需要设置 fetch 以明确发送 cookie。

   const response = await fetch("http://localhost:8000/api/app/user/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
      credentials: 'include'
    });

您可以在 MDN docs

中阅读有关 credentials 属性的更多信息

另外，如果是 http-only cookie，您可以在 front-end 中读取 cookie。

此外，不要忘记在您的后端应用程序中设置 Cross origin resource sharing。

Answer 2

使用 axios 而不是 fetch。

示例：

axios
      .get("http://localhost:8000/sanctum/csrf-cookie", {
        withCredentials: true,
      })
      .then((response) => {
        axios("http://localhost:8000/api/app/user/login", {
          method: "post",
          data: data,
          withCredentials: true,
        })
          .then((response) => {
            console.log("login", response.data);
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        // handle error
        console.log(error);
      })
      .then(() => {
        //
      });

无法从 nextjs (Reactjs) 中的 cookie 获取 XSRF-TOKEN

cannot get XSRF-TOKEN from cookie in nextjs (Reactjs)

javascript

reactjs

next.js