419 token mismatch laravel api and react

Question

The problem you're encountering involves receiving a "419 unknown status" error when attempting to make a POST request to your Laravel API endpoint (http://localhost:8000/api/store-pet). This error typically indicates a CSRF token mismatch.

Here's a description you can use:

Issue Description:

When attempting to submit a POST request to my Laravel API endpoint (http://localhost:8000/api/store-pet) from my React application, I receive a "419 unknown status" error. Upon further investigation, it appears to be related to a CSRF token mismatch.

Network status

The handleSubmit code :

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post(
        "http://localhost:8000/api/store-pet",
        data,
        {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }
      );
      console.log(response.data);
      navigate("/admin-dashboard");
    } catch (error) {
      console.error("Error adding pet:", error);
    }
    navigate("/admin-dashboard");
  };

Steps Taken:

I've ensured that the CSRF middleware is removed from the web middleware group in my Laravel application, as I am using it solely as an API. I've verified that the request headers, including the Authorization header containing the token, are correctly set in my Axios POST request. I've double-checked the route definition for /api/store-pet in my Laravel routes to ensure it is correctly configured and accessible. I've cleared the cache using php artisan cache:clear to rule out any caching issues. I've checked the Laravel logs (storage/logs/laravel.log) for any additional error messages, but none were found related to this issue.