在Laravel 10与HTMX环境中为HTML按钮添加CSRF令牌

419错误的核心原因是HTMX发送POST请求时没有携带Laravel要求的CSRF令牌，你之前把@csrf放在按钮内部的方式无效——按钮内的隐藏输入不会被HTMX自动纳入请求参数。以下是几种无需额外编写业务JS的解决办法：

方法1：用表单包裹按钮（无需额外脚本） #

将按钮放在表单内部，把@csrf放在表单里，HTMX会自动收集表单内的所有输入字段（包括CSRF令牌）随请求发送：

<form action="{{ route('your.route.name') }}" method="POST">
    @csrf
    <button type="button" class="tailwind stuff" data-hx-post="{{ route('your.route.name') }}">
        <span class="tailwind stuff">X</span>
    </button>
</form>

注：按钮的type="button"不影响HTMX的请求触发，表单仅用于提供CSRF令牌的载体。

方法2：全局配置HTMX自动携带CSRF头（一劳永逸） #

利用Laravel默认生成的CSRF meta标签，给HTMX添加全局请求头配置，只需一行极简脚本（属于HTMX配置，而非业务逻辑JS）：

1. 确保页面头部存在CSRF meta标签（Laravel默认布局已包含）：

<meta name="csrf-token" content="{{ csrf_token() }}">

2. 添加以下脚本（可放在布局的底部）：

document.addEventListener('htmx:configRequest', e => {
    e.detail.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
});

配置完成后，所有HTMX发起的POST/PUT/DELETE请求都会自动带上CSRF令牌头，无需为每个按钮单独处理。

方法3：用hx-include指定CSRF令牌（灵活适配单个按钮） #

如果不想用表单或全局配置，可以单独给按钮指定要包含的CSRF元素：

1. 在页面任意位置（比如布局里）添加一个隐藏的CSRF输入：

<input type="hidden" id="csrf-token" name="_token" value="{{ csrf_token() }}">

2. 在按钮上添加data-hx-include属性，指定包含这个CSRF元素：

<button type="button" class="tailwind stuff" 
        data-hx-post="{{ route('your.route.name') }}"
        data-hx-include="#csrf-token">
    <span class="tailwind stuff">X</span>
</button>

这样HTMX发送请求时会主动包含指定的CSRF令牌字段。

以上三种方法都能解决419错误，推荐方法2，一次配置全局生效，最符合HTMX的高效理念。

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