如何为HTMX的所有请求配置统一的基础URL前缀

你给出的原始示例代码如下：

<button hx-post="/clicked"
     hx-trigger="click"
     hx-target="#parent-div"
     hx-swap="outerHTML">
  Click Me!
</button>

要将所有请求路径统一拼接/api/v1前缀，无需逐个修改每个元素的请求属性，可任选以下一种方案实现：

方案1：使用HTMX原生hx-prefix属性（推荐，无需额外JS） #

HTMX 1.9.0及以上版本原生支持hx-prefix属性，该属性可继承，仅需在顶层父元素（如<body>标签）上配置即可全局生效：

<body hx-prefix="/api/v1">
  <!-- 此处写原有页面代码，所有子元素的HTMX请求路径会自动拼接前缀 -->
  <button hx-post="/clicked"
       hx-trigger="click"
       hx-target="#parent-div"
       hx-swap="outerHTML">
    Click Me!
  </button>
</body>

配置后原/clicked请求会自动变为/api/v1/clicked，无需修改任何子元素的属性。

方案2：全局事件拦截修改请求路径（兼容低版本HTMX） #

如果使用的HTMX版本低于1.9.0不支持hx-prefix，可以通过监听htmx:beforeRequest全局事件修改请求路径：

// 请确保这段代码在HTMX加载完成后执行
document.addEventListener('htmx:beforeRequest', function(event) {
  const requestPath = event.detail.path
  // 仅对根路径开头的相对路径添加前缀，避免重复添加或影响外部链接
  if (requestPath.startsWith('/') && !requestPath.startsWith('/api/v1/')) {
    event.detail.path = '/api/v1' + requestPath
  }
})

该方案同样无需修改现有元素的任何HTMX属性，全局自动生效。

方案3：服务端/构建侧批量拼接前缀 #

如果你的项目使用模板引擎（如Thymeleaf、Jinja2）或静态站点生成器，也可以在模板渲染阶段，统一给所有hx-post/hx-get/hx-put等属性的路径值拼接/api/v1前缀，这种方案在服务端/构建阶段完成处理，前端无需额外配置。

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