Laravel Sanctum 与 Redux 工具包和 Axios答案

【问题标题】：Laravel Sanctum with Redux Toolkit & AxiosLaravel Sanctum 与 Redux 工具包和 Axios
【发布时间】：2021-08-06 20:47:12
【问题描述】：

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

如果我尝试先在 createAsyncThunk 中获取 csrf 令牌，然后 /login，redux 工具包会假定请求已完成，从而在调用登录 api 之前更改状态
不知道为什么在创建axios实例时，没有在header中设置X-XSRF-TOKEN，但是当我使用正常导入的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请求（在返回response.data之前），我对这样的解决方案不感兴趣，我不需要复制代码

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

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

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

【问题讨论】：

标签： reactjs laravel axios csrf laravel-sanctum

【解决方案1】：

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

【讨论】：