Laravel Sanctum 使用 Redux 工具包和 Axios

Question

我有一个带有 laravel sanctum 实现的后端，所有配置都正常工作。例如，在我使用 React 的前端，一个动作被分派到登录。 X-XSRF-TOKEN 必须在到达终点之前设置，因此我必须先调用 /sanctum/csrf-cookie，我已经运行解决了这些问题：

如果我尝试先在 createAsyncThunk 中获取 csrf 令牌，然后在 /login 中，redux 工具包会假定请求已完成，从而在调用登录 api 之前更改状态
我不知道为什么当我创建一个 axios 实例时，X-XSRF-TOKEN 没有在 header 中设置，但是当我使用正常导入的 axios 时，它起作用了。

动作

export const login = createAsyncThunk("auth/login", async (_) => {
  try {
    request.get("sanctum/csrf-cookie").then((response) => {
      // THE PROBLEM OCCURS HERE, no header is received, (request is instantiated below, if I import axios it works)
      const res = await request.post("/login", _);
      return res.data;
      // this one failed with 419 csrf token mismatch, eventually because X-XSRF-TOKEN is not set, im not sure why
    });
  } catch (err) {
      throw err;
  }
});

axios

import axios from "axios";

export const  request = axios.create({
  baseURL: `http://localhost:8000/`,
   headers: {
     Accept: "application/json",
  },
});

axios.defaults.withCredentials = true;

注意：后端工作正常并且配置正确，因为如果我不创建实例而只是导入和使用 axios，请求工作正常，但我又回到了问题 1，thunk 是在第一个请求（在returnresponse.data之前），我对这样的解决方案不感兴趣，我不需要复制代码

总结： sanctum/csrf-cookie 响应没有 X-XSRF-TOKEN header，只有在使用 axios.create 创建 axios 实例时，才会收到一个 cookie 也许 header 在第二次请求时重置为默认值？如何从第一个请求中附加 headers？谢谢

-- 我应该尝试拦截请求并以某种方式将 header 附加到请求中，而不是像这样在所有请求中调用 sanctum/csrf-cookie 吗？

感谢任何帮助、示例和指南

Answer 1

菜鸟错误，使用的是axios.defaults.withCredentials = true；而不是 axiosInstance.defaults.withCredentials = true;

Laravel Sanctum 使用 Redux 工具包和 Axios

Laravel Sanctum with Redux Toolkit & Axios

reactjs

laravel

axios

csrf

laravel-sanctum