VueJS使用Ajax与Formspree提交表单时出现两类错误求助

我之前也碰到过类似的Formspree提交异常，结合你描述的两种错误，咱们一步步拆解排查：

错误1：刷新页面后提交显示「Cannot POST /Contact」 #

这个错误本质是前端路由或表单提交路径的问题——刷新页面后，当前页面的上下文发生了变化，导致表单的提交路径被解析成了当前域名下的/Contact，而不是Formspree的API地址。

排查&解决步骤：

• 检查表单的action属性：确保它是硬编码的Formspree完整URL（比如https://formspree.io/f/your-form-id），不要用相对路径。前端框架（比如React、Vue）的路由刷新很容易让相对路径解析出错，直接写全路径能避免这个坑。
• 确认表单method为POST：Formspree标准用法是POST请求，别不小心写成了GET或者其他方法。
• 检查jQuery Ajax配置：看你控制台报错指向了main.js:8的ajax调用，要确保这里的url参数是Formspree的正确地址，而不是依赖当前页面URL的相对路径（比如别写url: '/Contact'，要写完整的Formspree URL）。

错误2：返回后提交出现400 Bad Request错误 #

Formspree返回400错误，通常是请求参数不符合平台要求。结合你之前能正常提交的情况，大概率是请求字段、请求头变化，或者Formspree的验证规则触发了。

排查&解决步骤：

• 核对Formspree后台配置：登录Formspree后台，确认对应sheabathandbody@mail.com的表单没有被禁用，也没设置额外的必填字段/格式验证规则（比如漏填了必填项、字段格式不符合要求）。
• 检查Ajax请求的data参数：在main.js的ajax调用里，打印一下要发送的数据，确认没有缺失必填字段，格式也符合要求（比如email字段是否正确，有没有拼写错误）。
• 检查请求头设置：不要随意修改Content-Type，默认的application/x-www-form-urlencoded是Formspree最兼容的格式。如果用jQuery Ajax，别手动把contentType改成application/json（除非你确实是发送JSON且Formspree配置支持）。
• 清除浏览器缓存：有时候缓存的旧请求数据、Cookie会导致验证失败，清完缓存再试一次。
• 检查Formspree配额：虽然概率不高，但免费版有提交次数限制，去后台看看是不是配额用完了。

实用调试小技巧 #

• 用浏览器Network面板看请求详情：刷新提交时，确认POST请求的地址是不是正确的Formspree URL；返回后提交时，查看400请求的Response Body——Formspree通常会返回具体错误提示（比如「Missing required field: email」），能帮你快速定位问题。
• 测试最简静态表单：写一个不带任何JS逻辑的纯HTML表单，直接指向你的Formspree地址测试。如果能正常提交，说明问题出在你的前端JS或路由配置；如果还是不行，那就是Formspree后台的配置问题。

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