如何让HTMX展示hx-delete请求返回的403错误页面？

方案1：全局监听HTMX请求完成事件 #

通过全局监听htmx:afterRequest事件，捕获所有请求的响应状态，当检测到403状态码时，直接用响应内容替换整个页面的HTML结构。

document.body.addEventListener('htmx:afterRequest', function(event) {
  const xhr = event.detail.xhr;
  if (xhr.status === 403) {
    document.documentElement.innerHTML = xhr.responseText;
  }
});

这个方法的优势是一次配置即可覆盖所有HTMX请求，无需逐个修改请求元素。

方案2：在单个请求元素上添加事件监听 #

如果只需要针对特定的hx-delete请求处理，可以在触发请求的元素上直接绑定事件：

<button hx-delete="/your/resource/path"
        hx-on="htmx:afterRequest: if(event.detail.xhr.status === 403) document.documentElement.innerHTML = event.detail.xhr.responseText">
  删除资源
</button>

方案3：后端配合返回重定向头（可选） #

如果允许调整后端逻辑，可以让后端在返回403权限错误时，返回302状态码并设置HX-Redirect响应头，指向你的完整403错误页面：

HTTP/1.1 302 Found
HX-Redirect: /error/403

HTMX会自动处理这个重定向，加载并展示完整的403页面。

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