React redux laravel api 419 unknow status

Question

i need help on this problem. can't figure this issue out.

Status Code: 419 unknown status

I've created the laravel api with sanctum and now i am trying to access data with react js and redux but i am stuck at it. it is working fine using the postman!

import {
  REGISTER_SUCCESS,
  REGISTER_FAIL,
  USER_LOADED,
  AUTH_ERROR,
  LOGIN_SUCCESS,
  LOGIN_FAIL,
  LOGOUT,
} from "../actionType";
import { setAlert } from "./errors.action";
import setAuthToken from "../../utils/SetAuthToken";
import axios from "axios";
export const loadUser = () => async (dispatch) => {
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  try {
    const res = await axios
      .get("http://127.0.0.1:8000/sanctum/csrf-cookie", {
        mode: "cors",
        withCredentials: true,
      })
      .then((response) => {
        axios.defaults.headers.post["X-CSRF-Token"] = response.data._csrf;
        console.log(response);
        axios.get("http://127.0.0.1:8000/api/user", {
          headers: {
            "Content-Type": "application/json",
            // Authorization: "Bearer " + token,
          },
        });
      });
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};
// Register User
export const register =
  ({ name, email, password }) =>
  async (dispatch) => {
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };

    const body = JSON.stringify({ name, email, password });

    try {
      const res = await axios.post("/register", body, config);

      dispatch({
        type: REGISTER_SUCCESS,
        payload: res.data,
      });

      dispatch(loadUser());
    } catch (err) {
      const errors = err.response.data.errors;

      if (errors) {
        errors.forEach((error) => dispatch(setAlert(error.msg, "danger")));
      }

      dispatch({
        type: REGISTER_FAIL,
      });
    }
  };
export const login = (email, password) => {
  return (dispatch) => {
    axios
      .get("http://127.0.0.1:8000/sanctum/csrf-cookie", {
        mode: "cors",
        withCredentials: true,
      })
      .then((response) => {
        console.log(response);
        axios.defaults.headers.post["X-CSRF-Token"] = response.data._csrf;
        axios
          .post("http://127.0.0.1:8000/api/login", {
            headers: {
              "Content-type": "application/json",
              Accept: "application/json",
              withCredentials: true,
              // "X-XSRF-TOKEN": getCookie("XSRF-TOKEN"),
            },
            email,
            password,
          })
          .then((token) => {
            localStorage.setItem("token", token.data);
            dispatch({
              type: "LOGIN_SUCCESS",
              token: token.data,
            });
          })
          .catch((error) => {
            console.log(error.response);
          });
      });
  };
};

// AUTHENTICATION 

export const SET_ALERT = "SET_ALERT";
export const REMOVE_ALERT = "REMOVE_ALERT";
export const REGISTER_SUCCESS = "REGISTER_SUCCESS";
export const REGISTER_FAIL = "REGISTER_FAIL";
export const USER_LOADED = "USER_LOADED";
export const AUTH_ERROR = "AUTH_ERROR";
export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGIN_FAIL = "LOGIN_FAIL";
export const LOGOUT = "LOGOUT";

import { combineReducers } from "redux";
import { loadUser } from "./actions/auth.action";

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

export default rootReducers;

I've tried all around the possible solution i am seeing online but i can't get it at all!!!

import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Redirect } from "react-router-dom";
import Car from "../../pages/Car";
import Client from "../../pages/Client";
import Dashboard from "../../pages/Dashboard";
import Login from "../auth/Login";
import Order from "../../pages/Order";
import Register from "../auth/Register";
import Report from "../../pages/Report";
import Welcome from "../../pages/Welcome";
import setAuthToken from "../../utils/SetAuthToken";
import Sidebar from "../Sidebar";
import PrivateRoute from "./PrivateRoute";
import PublicRoute from "./PublicRoute";
// use with redux
import store from "../../redux/store";
import { loadUser } from "../../redux/actions/auth.action";
if (localStorage.token) {
  setAuthToken(localStorage.token);
}
function Index() {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);
  return (
    <Router>
      <Sidebar />
      <Switch>
        <PublicRoute exact path="/" component={Welcome} />
        <PublicRoute exact path="/login" component={Login} />
        <PublicRoute exact path="/register" component={Register} />
        <PrivateRoute exact path="/client" component={Client} />
        <PrivateRoute exact path="/order" component={Order} />
        <PrivateRoute exact path="/car" component={Car} />
        <PrivateRoute exact path="/report" component={Report} />
        <PrivateRoute
          path={process.env.PUBLIC_URL + "/dashboard"}
          component={Dashboard}
          exact
        />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

export default Index;