Laravel添加收藏夹功能遇请求方法不支持错误，锚标签是否有问题？

在Laravel应用中开发「加入收藏夹」功能时，点击链接触发操作出现「方法不支持」错误。

使用的锚标签代码：

<a href="{{url('/post_wishlist')}}" id="addtowishlist"><i class="fa fa-heart fa-2x addtowishliststyle" aria-hidden="true" style="color:' + (cardimg['inWishlist'] ? '#8B0000' : 'white') + '"></i></a>

web.php中定义的路由及控制器方法：

Route::post('/post_wishlist', [MyCartController::class, 'post_wishlist'])->name('post_wishlist');

public function post_wishlist()
{
    echo "add to wishlist called";
}

点击链接后出现的错误：

The GET method is not supported for route post_wishlist. Supported methods: POST

请问是否是锚标签存在问题？

核心问题是a标签默认发起GET请求，但你的路由只允许POST请求，和锚标签本身无关，是请求方法不匹配导致的。以下是几种可行的解决方式：

方式1：修改路由允许GET请求（不推荐） #

如果业务逻辑允许，可以调整路由支持GET请求：

// 仅支持GET
Route::get('/post_wishlist', [MyCartController::class, 'post_wishlist'])->name('post_wishlist');
// 同时支持GET和POST
Route::match(['get', 'post'], '/post_wishlist', [MyCartController::class, 'post_wishlist'])->name('post_wishlist');

但收藏夹操作属于修改数据的行为，遵循RESTful规范应该用POST，因此更推荐下面两种方式。

方式2：用表单模拟POST请求 #

将a标签替换为表单提交按钮，模拟POST请求：

<form action="{{ route('post_wishlist') }}" method="POST" id="wishlistForm">
    @csrf
    <button type="submit" style="border:none; background:none; padding:0; cursor:pointer;">
        <i class="fa fa-heart fa-2x addtowishliststyle" aria-hidden="true" style="color:' + (cardimg['inWishlist'] ? '#8B0000' : 'white') + '"></i>
    </button>
</form>

注意必须加上@csrf指令，Laravel会验证CSRF令牌，否则会返回419错误。

方式3：用JavaScript发起AJAX POST请求 #

如果需要无刷新操作，适合用JS发送POST请求：

<a href="javascript:void(0)" id="addtowishlist">
    <i class="fa fa-heart fa-2x addtowishliststyle" aria-hidden="true" style="color:' + (cardimg['inWishlist'] ? '#8B0000' : 'white') + '"></i>
</a>

<script>
document.getElementById('addtowishlist').addEventListener('click', function() {
    fetch("{{ route('post_wishlist') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}",
            'Content-Type': 'application/json'
        }
    }).then(response => {
        // 操作成功后的逻辑，比如更新图标颜色
        console.log('加入收藏成功');
    }).catch(error => {
        console.error('操作失败', error);
    });
});
</script>

这种方式无需页面刷新，用户体验更流畅。

内容的提问来源于stack exchange，提问作者Ruby