调用 API 端点成功，但 DevTools 显示 500 错误

Question

我正在使用 Laravel 向端点发出请求，当我在本地测试时该端点工作正常并返回我期望的内容到前端，甚至当我在浏览器中访问 API 路由/请求 URL 时，它也会返回正确的内容我在前端看到的响应（例如

http://127.0.0.1:8000/api/makeRequest?user_input=salmon%2Crice

返回完美的响应）。但是，当我打开 DevTools 时，它告诉我收到 500 内部服务器错误。我的配置有什么问题吗？

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 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 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.");
    }
}

编辑：添加 DevTools 中“网络”选项卡的屏幕截图

Answer 1

您需要将csrf令牌添加到您的POST请求中，将您的

makeRequest

修改为

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",
                "X-CSRF-TOKEN": $('[name="csrf-token"]').attr('content'),
                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.");
    }
}

Answer 2

解决这个问题的最好方法是如果你有API的参数或者你知道你必须从哪里获取数据，你可以通过门请求传递数据，这将帮助你解决这个问题，但在此之前如果你想返回数据杰森，所以你还需要在杰森中完成查看这里的问题，你必须在你的路线中定义

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

公共功能商店（请求$请求）