使用 HTMX 和 Laravel 10 将 CSRF 令牌添加到 HTML 按钮

问题描述 投票：0回答：1

我正在使用 Laravel 10 并慢慢合并 HTMX（我喜欢）。我正在尝试将 

data-hx-post
添加到一个 POST 到我定义的 Web 路由的按钮。我收到 419 错误。好的，很酷，以前见过这个 - 我所要做的就是将 
@csrf
添加到按钮，对吧？

这种方法适用于表单，但显然不适用于按钮。 csrf 指令正确地将隐藏输入字段添加到 DOM，但我猜它不会像表单那样通过按钮 POST 发送。有没有办法将 CSRF 令牌添加到本机 HTML 按钮，或者我是否需要开始编写一些 JavaScript 以在按下按钮后添加令牌？我已经研究了一些 SO 问题，这似乎是最常见的建议，但我真的很想尽可能避免使用 JavaScript - 这就是为什么我使用 HTMX 来为我处理这一切:-)。

按钮代码：

<button type="button" class="tailwind stuff" data-hx-post="route">
@csrf
  <span class="tailwind stuff">X</span>
</button>

我没有使用 Laravel Sanctum，这是一个具有最少 JavaScript 的 SPA（基本上都是 php 和 HTMX），我没有使用 Livewire，也没有使用 Alpine.js。我在 laravel.log 文件中也没有看到任何输出 - 当我单击按钮时，我刚刚收到 419。任何提示将不胜感激。

laravel htmx
1个回答
0
投票

您可以让 htmx 在每个请求中发送 csrf 令牌值，方法是将其附加到 body 元素上的hx-headers：

<body hx-headers='{"_token": "{{ csrf_token() }}"}'>

如果您想了解更多详细信息，django-htmx 中对此方法进行了解释。通过使用上面的代码片段，它应该与 Laravel 一样工作。

https://django-htmx.readthedocs.io/en/latest/tips.html#make-htmx-pass-the-csrf-token

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.