在前端开发中，当我们使用 AJAX 提交表单时，经常会遇到"表单提交已取消，因为表单未连接"的错误。这个错误通常是由于服务端返回了非法的 HTTP 响应头导致的。
错误原因
当我们使用 AJAX 提交表单时，浏览器会自动将表单序列化并添加到请求参数中，同时也会发送一个 Content-Type 请求头告诉服务端请求格式是表单数据类型。如果服务端没有正确地设置响应头，浏览器就会认为这个请求失败了。
解决方法
要解决这个问题，我们需要在服务端正确地设置响应头。具体来说，我们需要确保服务端返回如下 HTTP 响应头：
------------- ---------------- ---------------------------- -
其中 Content-Type 表示响应的数据类型是 JSON，而 Access-Control-Allow-Origin 则表示允许跨域请求。
以下是一个 Node.js Express 服务器的示例代码：
----- ------- - ------------------ ----- --- - --------- ----------------------- ------------------------ ----- ---- -- - -- -------- -- --- -- ----- ----------------------------- ------------------- -------------------------------------------- ---- -- ---- ---------- -------- ---- -- -- ---------------- -- -- - ------------------- ------- -- ----------------------- --
在以上示例代码中，我们使用 express.json() 中间件解析请求体，并在处理完表单提交逻辑后设置响应头并发送响应。
总结
在前端开发中，当我们遇到"表单提交已取消，因为表单未连接"的错误时，通常是由于服务端返回了非法的 HTTP 响应头导致的。要解决这个问题，我们需要确保服务端返回正确的响应头。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11006