部署Formspree表单时405错误的解决方法及取消跳转方案

一、修复405 "Method not allowed"错误 #

• 配置Formspree域名白名单：登录Formspree后台，找到对应表单的设置页面，将部署后的域名（如xxx.github.io或你的Vercel自定义域名）添加到「Allowed Domains」列表中。默认情况下Formspree仅允许localhost提交，未添加部署域名会触发405拦截。
• 验证端点格式：确认表单action中的地址是Formspree分配的正确表单ID格式：https://formspree.io/f/[your-form-id]，不要直接使用邮箱地址作为端点。
• 检查请求方法：确保表单的method属性为POST，Formspree不支持GET方法提交表单。

二、取消重定向并实现无刷新提交 #

通过手动处理表单提交事件，阻止默认跳转行为，使用Fetch API发送请求即可实现无重定向提交，同时保证表单功能正常：

function Form(){
  const handleSubmit = async (e) => {
    e.preventDefault(); // 阻止默认跳转
    const formData = new FormData(e.target);

    try {
      const res = await fetch("https://formspree.io/f/your-form-id", {
        method: "POST",
        body: formData,
        headers: {
          "Accept": "application/json"
        }
      });

      if (res.ok) {
        // 提交成功后的自定义操作，比如显示提示或重置表单
        alert("提交成功！感谢你的留言");
        e.target.reset();
      } else {
        alert("提交失败，请稍后再试");
      }
    } catch (err) {
      alert("网络异常，请检查连接后重试");
    }
  };

  return(
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="你的姓名" required />
      <input type="email" name="email" placeholder="你的邮箱" required />
      <textarea name="message" placeholder="留言内容" rows="5" required />
      <button type="submit">提交</button>
    </form>
  )
}

关键说明： #

• e.preventDefault()：彻底阻止表单默认的提交跳转逻辑。
• FormData：自动封装表单内所有输入字段，无需手动拼接请求参数。
• Accept: application/json：让Formspree返回JSON格式响应，便于后续判断提交状态。
• 提交成功后可根据需求替换alert为自定义的感谢组件，提升用户体验。

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