Question

我在Laravel 5.2中遇到了AJAX POST请求的问题。我在AJAX请求中传递了一个有效的CSRF令牌。

使用Laravel Collective HTML package表单标记打开和关闭表单，这会自动添加带有CSRF令牌的隐藏_token输入。呈现HTML：

<form method="POST" action="http://www.example.com/admin/products/search" accept-charset="UTF-8" id="product-search-form">
<input name="_token" type="hidden" value="mOaBxU1sVUsRX1KkuAeVhSDSxj0LKT8DDxl9USQc">

<div>
    <label for="keywords" class="required">Keywords</label>
    <input id="keywords" placeholder="Enter keywords" name="keywords" type="text">
</div>

<div>
    <label for="category" class="required">Category</label>
    <select id="category" name="category">
        <option selected="selected" value="">Choose a category...</option>
        <option value="category-1">Category 1</option>
        <option value="category-2">Category 2</option>
        <option value="category-3">Category 3</option>
    </select>
</div>

<div>
    <button id="search-product-submit" type="submit">Search</button>
</div>

</form>

使用Fetch API和FormData执行AJAX请求：

function $(id) {
    return document.getElementById(id);
}

var searchProductSubmitButton = $("search-product-submit");

function fetchStatus(response) {
    if (response.status >= 200 && response.status < 300) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(new Error(response.statusText));
    }
}

function fetchJson(response) {
    return response.json();
}

function searchProducts(evt){
    var keywords = $("keywords").value,
        categorySelect = $("category"),
        category = categorySelect.options[categorySelect.selectedIndex].value,
        csrfToken = document.getElementsByTagName("meta")["csrf-token"].getAttribute("content"),
        productSearchForm = $("product-search-form"),
        formData = new FormData(productSearchForm);

    evt.preventDefault();

    if(keywords !== "" && category !== ""){
        fetch("/admin/products/search", {
            method: "POST",
            body: formData,
            headers: {
                "X-CSRF-TOKEN": csrfToken
            }
        })
        .then(fetchStatus)
        .then(fetchJson)
        .then(function(products) {
            console.log("The operation was a complete success");
        }).catch(function(error) {
            console.log("Request failed", error);
        });
    }
}
searchProductSubmitButton.addEventListener("click", searchProducts, false);
searchProductSubmitButton.addEventListener("keypress", searchProducts, false);

CSRF令牌和表单数据位于请求有效负载中：

------WebKitFormBoundaryQFECPn7xpptqi076
Content-Disposition: form-data; name="_token"

mOaBxU1sVUsRX1KkuAeVhSDSxj0LKT8DDxl9USQc
------WebKitFormBoundaryQFECPn7xpptqi076
Content-Disposition: form-data; name="keywords"

dsafafa
------WebKitFormBoundaryQFECPn7xpptqi076
Content-Disposition: form-data; name="category"

DVD
------WebKitFormBoundaryQFECPn7xpptqi076--

请求有效内容中的_token输入和x-csrf-token标头与在View Source中看到的令牌相同。

路由正在使用网络中间件：

Route::group(['prefix' => 'admin', 'middleware' => 'web'], function () {
    Route::post('products/search', [ // == "admin/products/search" with prefix
        'as'   => 'products.search',
        'uses' => 'ProductsController@search'
    ]);
});

控制器：

public function search(SearchRequest $request){
    Log::info('keywords: ' . $request->keywords);
    Log::info('category: ' . $request->category);

    return response()->json([
        'keywords' => $request->keywords,
        'category' => $request->category
    ], 200);
}

Answer 1

我有时也会遇到这些问题并通过发送_token的POST来修复它，而不是将其放在标题中。

或者为什么不排序整个表单？

Answer 2

我做了一个POST请求并且我正在使用URL参数执行GET请求： https://laracasts.com/discuss/channels/laravel/laravel-52-ajax-post-tokenmismatchexception-with-valid-csrf-token/replies/135330

具有有效CSRF令牌的Laravel 5.2 Ajax POST TokenMismatchException

2 个答案: