React+Redux调用Laravel Sanctum接口返回419 unknown status问题求助

Laravel返回419状态码的核心原因是CSRF令牌校验失败，你Postman调用正常是因为Postman会自动处理cookie和CSRF头，前端代码存在多个逻辑错误导致令牌传递异常，具体问题和修复方案如下：

1. 核心代码错误点 #

• 错误从sanctum/csrf-cookie接口的响应body读取_csrf字段：Sanctum的该接口仅通过Set-Cookie响应头设置XSRF-TOKEN Cookie，不会在响应体返回任何CSRF字段，你读取到的是undefined，自然校验失败
• 错误配置CSRF请求头：Laravel默认读取的CSRF请求头是X-XSRF-TOKEN，不是你写的X-CSRF-Token，且只要开启withCredentials，Axios会自动从Cookie读取XSRF-TOKEN并带上对应请求头，无需手动设置
• withCredentials配置位置错误：登录请求中将withCredentials写在了headers配置项内，该参数是Axios的全局/请求级配置，不是请求头，写在headers内不生效，导致请求不会携带Cookie
• Reducer配置错误：combineReducers中传入的是action函数loadUser，不是对应的auth reducer，导致Redux状态逻辑完全异常
• 异步逻辑混乱：loadUser中混用async/await和then，且内部的axios.get("/api/user")没有return，导致外层拿不到接口返回值

2. 修复步骤 #

第一步：全局配置Axios #

在项目入口文件（比如src/index.js）添加全局配置，避免重复写参数：

import axios from 'axios'
// 配置后端接口基础地址
axios.defaults.baseURL = 'http://127.0.0.1:8000'
// 全局开启跨域带Cookie
axios.defaults.withCredentials = true
// 统一设置请求头
axios.defaults.headers.common['Accept'] = 'application/json'
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

第二步：修正loadUser函数 #

export const loadUser = () => async (dispatch) => {
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  try {
    // 仅需请求一次获取CSRF Cookie，无需手动处理头
    await axios.get("/sanctum/csrf-cookie");
    const res = await axios.get("/api/user");
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

第三步：修正login函数 #

export const login = (email, password) => async (dispatch) => {
  try {
    await axios.get("/sanctum/csrf-cookie");
    const res = await axios.post("/api/login", { email, password });
    // 若使用Sanctum令牌模式则保留本地存token逻辑，使用Cookie会话模式可以去掉
    localStorage.setItem("token", res.data);
    setAuthToken(res.data);
    dispatch({
      type: LOGIN_SUCCESS,
      token: res.data,
    });
    dispatch(loadUser());
  } catch (error) {
    console.log(error.response);
    dispatch({ type: LOGIN_FAIL });
  }
};

第四步：修正Redux Reducer配置 #

替换你的rootReducer代码，传入正确的reducer函数：

import { combineReducers } from "redux";
// 替换为你实际的auth reducer导入路径
import authReducer from "./reducers/auth.reducer";

const rootReducers = combineReducers({
  auth: authReducer,
});

export default rootReducers;

第五步：确认Laravel端配置 #

• 打开.env文件，配置SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000（替换为你React应用实际的访问地址）
• 打开config/cors.php，设置'supports_credentials' => true，allowed_origins设置为你的React地址，不要用*
• 本地开发可以设置SESSION_DOMAIN=.localhost保证跨子域Cookie正常传递

内容的提问来源于stack exchange，提问作者chablis-omoba