Laravel Sanctum with Redux Toolkit & Axios

Question

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

1. 如果我先尝试在createAsyncThunk中获取csrf令牌，然后再获取/login，redux toolkit会假设请求已完成，从而在调用登录api之前更改状态
2. 我不知道为什么当我创建一个axios实例时，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之前(，我对这样的解决方案不感兴趣，我不需要复制代码

摘要：santum/csrf cookie响应没有X-XSRF-TOKEN标头，只有当使用axios创建axios实例时，才会收到cookie也许在第二次请求时标头正在重置为默认值？如何添加第一个请求的头？感谢

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

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

Answer 1

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