使用HTMX向REST端点提交表单时遇302及405错误求助

你的问题核心在于：HTMX提交POST请求后，后端返回302重定向，HTMX会自动跟随该重定向发起GET请求，但目标接口仅支持POST方法，因此触发405错误。而Postman不会自动跟随302重定向，所以能正常接收POST请求的响应。另外，你的HTML中存在重复ID（表单和隐藏输入框的ID都是contact），违反HTML规范，可能引发潜在的DOM选择问题。

1. 修复后端响应逻辑（优先推荐） #

后端处理完表单提交后，不要返回302重定向，直接返回200 OK响应，同时返回成功提示内容（JSON或HTML片段均可）。HTMX会自动用响应内容更新页面上的#response区域，不会触发后续的GET请求。

示例后端响应（JSON格式）：

{
  "status": "success",
  "message": "表单提交成功！"
}

示例后端响应（HTML片段）：

<p class="success">表单已成功提交，我们会尽快回复你！</p>

2. 调整HTMX的重定向处理（若必须保留重定向） #

如果后端业务逻辑要求必须重定向，可修改后端返回HX-Redirect响应头（而非302状态码），HTMX会识别该头并在客户端执行页面跳转，不会发起无效的GET请求。

或者，在提交按钮上添加hx-follow="false"属性，阻止HTMX跟随重定向，自行处理响应结果：

<button hx-post="{{ url('<front>') }}/webform_rest/submit?_format=json" type="submit" hx-follow="false">Send</button>

3. 修复HTML重复ID问题 #

将隐藏输入框的ID改为唯一值，避免DOM选择冲突：

<input type="text" class="hidden" id="webform_id_input" name="webform_id" value="contact">

1. 先修复重复ID问题，排除潜在的DOM解析错误。
2. 调整后端响应逻辑，返回200状态码的响应内容。
3. 重新测试表单提交，确认不再出现302和405错误。

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