Laravel AJAX DELETE 请求方法不匹配问题及解决方案

laravel ajax delete 请求方法不匹配问题及解决方案

本文旨在解决Laravel应用中，当尝试通过AJAX发送DELETE请求时，遇到的“GET method is not supported for this route”错误。我们将深入探讨导致此问题的原因，并提供一个结合AJAX和Laravel方法伪造（Method Spoofing）机制的完整解决方案，确保DELETE请求能够被正确路由和处理。

理解问题：GET 方法不受支持

当您在Laravel中定义了一个 Route::delete() 路由，但尝试通过前端的 zuojiankuohaophpcna> 标签或配置不当的 AJAX 请求来触发时，很可能会遇到“GET method is not supported for this route. Supported methods: POST.”这样的错误。这通常是由于以下几个原因造成的：

  1. <a> 标签的默认行为： HTML中的 <a> 标签默认会发起一个 GET 请求到其 href 属性指向的URL。即使您在JavaScript中尝试通过AJAX发送 DELETE 请求，如果 <a> 标签的默认行为没有被阻止，浏览器仍会先发起一个 GET 请求，导致路由匹配失败。
  2. HTTP 方法伪造的缺失： 某些浏览器或环境对 DELETE、PUT、PATCH 等非 GET/POST 请求的支持可能不够完善，或者在特定的AJAX库配置下，服务器端无法直接识别这些方法。Laravel为了解决这个问题，引入了方法伪造（Method Spoofing）机制。

在Laravel中，Route::delete(‘operDel/{id}’, …) 明确要求请求方法必须是 DELETE。如果服务器收到的请求方法是 GET，自然会抛出方法不匹配的错误。

Laravel 中的方法伪造 (Method Spoofing)

HTTP 协议定义了多种请求方法，如 GET、POST、PUT、DELETE、PATCH 等。然而，并非所有客户端（如旧版浏览器）或服务器都完全支持所有这些方法。为了在Web应用中模拟 PUT、DELETE 或 PATCH 请求，Laravel 允许通过在 GET 或 POST 请求中包含一个特殊的 _method 参数来“伪造”HTTP 方法。

当Laravel接收到一个 GET 或 POST 请求，并且请求数据（无论是表单数据还是查询字符串）中包含 _method 参数时，Laravel的 MethodOverrideMiddleware 会拦截该请求，并将其视为 _method 参数指定的方法（例如 DELETE）。这样，即使实际的HTTP请求方法是 GET 或 POST，Laravel的路由系统也能正确匹配到 Route::delete() 等路由。

解决方案：结合 AJAX 和方法伪造

解决此问题的关键在于：

  1. 阻止 <a> 标签的默认 GET 行为。
  2. 在 AJAX 请求中明确告知 Laravel 实际的意图是 DELETE，即使请求的传输类型是 GET 或 POST。

下面是结合前端 Blade 视图、JavaScript (AJAX) 和 Laravel 后端路由/控制器代码的完整解决方案。

造梦阁AI

造梦阁AI

AI小说推文一键成片，你的故事值得被看见

造梦阁AI139


查看详情
造梦阁AI

1. 前端 Blade 视图 (.blade.php)

保持 <a> 标签的结构不变，但其 href 属性将仅用于获取 URL，实际的导航行为将被 JavaScript 阻止。

<a href="{{ route('operDel',$data->id) }}" class="btn btn-danger btn-sm"
   data-tr="tr_{{$data->id}}"
   data-id="{{$data->id}}"
   data-toggle="confirmation"
   data-btn-ok-label="Delete" data-btn-ok-icon="fa fa-remove"
   data-btn-ok-class="btn btn-sm btn-danger"
   data-btn-cancel-label="Cancel"
   data-btn-cancel-icon="fa fa-chevron-circle-left"
   data-btn-cancel-class="btn btn-sm btn-default"
   data-title="Are you sure you want to delete ?"
   data-placement="left" data-singleton="true">Delete</a>

{{-- 确保页面中有CSRF token meta标签 --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
登录后复制

2. JavaScript (AJAX) 调整

这是核心的修改部分。我们需要在 $.ajax 调用中进行以下关键调整：

  • e.preventDefault()： 阻止 <a> 标签的默认 GET 请求行为。
  • type: ‘get’ (或 ‘post’)： 将 AJAX 请求的传输类型设置为 GET 或 POST。这里使用 GET 是因为 <a> 标签的 href 通常用于 GET 请求，但关键在于通过 data 参数进行方法伪造。
  • data: { “_method”: ‘DELETE’, … }： 在请求的数据体中明确传递 _method: ‘DELETE’，告诉 Laravel 这是一个 DELETE 请求。
  • headers: {‘X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]’).attr(‘content’)}： 确保发送 CSRF 令牌以通过 Laravel 的 CSRF 保护。
$(document).on('confirm', function (e) {
    var ele = e.target;
    e.preventDefault(); // 阻止<a>标签的默认GET请求行为

    // 获取CSRF token
    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    // 获取要删除的ID
    var id = $(ele).data('id');

    $.ajax({
        url: ele.href, // 或者直接使用 "operDel/" + id
        type: 'get', // 使用GET或POST作为实际传输类型
        headers: {
            'X-CSRF-TOKEN': csrfToken // 发送CSRF token
        },
        data: {
            "id": id,
            "_method": 'DELETE', // 关键：通过_method参数伪造DELETE方法
            "_token": csrfToken // 也可以在这里再次传递token，但headers已足够
        },
        success: function (data) {
            if (data['success']) {
                $("#" + data['tr']).slideUp("slow");
                alert(data['success']);
            } else if (data['error']) {
                alert(data['error']);
            } else {
                alert('Whoops Something went wrong!!');
            }
        },
        error: function (data) {
            // 改进错误处理，显示服务器返回的详细错误信息
            if (data.responseJSON && data.responseJSON.message) {
                alert('Error: ' + data.responseJSON.message);
            } else {
                alert('An unexpected error occurred: ' + data.responseText);
            }
        }
    });
    // return false; // 在e.preventDefault()后，通常不需要再return false
});
登录后复制

3. 后端 Laravel 路由 (routes/web.php)

路由定义保持不变，因为 Laravel 的方法伪造机制会使其正确匹配。

Route::delete('operDel/{id}', '/App/Http/Controllers/OperationController@destroy')
    ->name('operDel')
    ->middleware('auth');
登录后复制

4. 后端 Laravel 控制器 (app/Http/Controllers/OperationController.php)

控制器方法也保持不变，因为它接收到的请求已经被 Laravel 的中间件处理为 DELETE 请求。

<?php

namespace App/Http/Controllers;

use Illuminate/Http/Request;
use App/Models/Kvit; // 假设您的模型是Kvit

class OperationController extends Controller
{
    public function destroy($id)
    {
        // 确保使用正确的模型和变量名
        Kvit::where('id', $id)->delete();

        return response()->json([
            'success' => "Product Deleted successfully.",
            'tr' => 'tr_' . $id
        ]);
    }
}
登录后复制

注意事项与最佳实践

  • 阻止默认事件： 始终确保在 AJAX 请求中正确使用 e.preventDefault() 来阻止 <a> 标签或其他元素的默认行为，以避免不必要的页面跳转或 GET 请求。
  • 理解方法伪造： _method 参数是 Laravel 框架特有的机制，用于解决浏览器对某些 HTTP 方法支持不足的问题。在处理 PUT、DELETE、PATCH 请求时，如果不是通过原生表单提交且指定了 method=”POST” 并包含 _method 隐藏字段，或者不是通过支持这些方法的 AJAX 请求，就可能需要用到它。
  • CSRF 保护： 在所有修改数据的请求（POST, PUT, DELETE 等）中，务必包含 CSRF 令牌，以防止跨站请求伪造攻击。Laravel 提供了多种方式来获取和发送 CSRF 令牌。
  • 错误处理： 完善前端 AJAX 请求的 error 回调函数，提供清晰的用户反馈。后端控制器也应返回有意义的错误信息，便于调试。
  • URL 构建： 在 AJAX 中，使用 ele.href 获取 URL 是方便的，但也可以直接根据路由名称和 ID 动态构建 URL，例如 ‘/operDel/’ + id。
  • 语义化 HTTP 方法： 尽管使用了方法伪造，但从代码逻辑上，我们仍然应该坚持使用语义化的 HTTP 方法（如 DELETE 用于删除操作），这有助于代码的可读性和维护性。

通过以上调整，您的 Laravel 应用将能够正确处理通过 AJAX 发送的 DELETE 请求，避免方法不匹配的错误，并提供流畅的用户体验。

以上就是Laravel AJAX DELETE 请求方法不匹配问题及解决方案的详细内容，更多请关注php中文网其它相关文章！

相关标签：

php javascript laravel java html js 前端 json ajax 浏览器 app php JavaScript laravel 中间件 ajax html csrf for Error Token 回调函数 字符串 delete 事件 this href http

大家都在看：

https://www.php.cn/faq/1521216.html

发表回复

Your email address will not be published. Required fields are marked *