Call to API Endpoint Successful but DevTools Showing 500 Error

Question

I'm using Laravel to make a request to an endpoint, which when I test locally works fine and returns what I'm expecting to the frontend, and even when I access the API route/Request URL in the browser it returns the proper response I see in the frontend (ex. http://127.0.0.1:8000/api/makeRequest?user_input=salmon%2Crice returns a perfectly fine response). However, when I open DevTools it tells me I'm getting a 500 Internal Server Error. What's wrong with my configuration?

api.php:

Route::post('/makeRequest', [App\Http\Controllers\ApiController::class, 'makeRequest'])->name('makeRequest.store');
Route::get('/makeRequest', [App\Http\Controllers\ApiController::class, 'makeRequest'])->name('makeRequest.store');

form in my view:

                <form id="recipeForm" method="post" action="/makeRequest">
                        @csrf
                        <input type="text" id="ingredientInput" placeholder="Ingredient" class="input input-bordered w-full max-w-xs">
                </form>

makeRequest function:

function makeRequest(ingredients) {
    if (ingredients.length > 0) {
        var userInput = ingredients;
        var url = `/api/makeRequest?user_input=${encodeURIComponent(
            userInput
        )}`;
        console.log(ingredients);

        fetch(url, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            },
            body: JSON.stringify({ ingredients: ingredients }),
        })
            .then((response) => response.text())
            .then((html) => {
                handleApiResponse(html);
            })
            .catch((error) => {
                console.error("Error:", error);
            });
    } else {
        alert("Please add at least one ingredient before submitting.");
    }
}

edit: adding a screenshot from Network tab in DevTools