表单提交后无法重定向至/quiz页面提示Cannot POST /quiz报错

问题根因 #

出现Cannot POST /quiz错误的核心原因是两套表单提交逻辑冲突，且后端不存在POST /quiz的路由：

• 你给form标签配置了method="post" action="/quiz"，同时把提交函数里的e.preventDefault()注释掉了，点击提交按钮时，浏览器会先执行你绑定的submit方法发请求到/store，同时触发原生表单默认提交行为，直接向/quiz地址发送POST请求
• 你后端只定义了POST /store的接口，没有定义POST /quiz的处理逻辑；而你在React Router里配置的/quiz是前端路由，仅处理浏览器端的GET页面渲染，根本接不住POST请求，直接返回404错误

结论 #

不需要为/quiz添加后端POST路由。你用的是React单页应用架构，/quiz是前端控制的页面路由，跳转完全在浏览器端完成，后端只需要负责提供数据接口即可。

修复步骤 #

1. 修正表单提交逻辑，阻止原生默认提交 #

首先去掉form标签上冗余的原生提交配置，阻止浏览器默认发POST请求到/quiz，等表单数据存到后端成功后，再用前端路由跳转到测验页：

// 先在form.jsx顶部引入路由跳转方法
import { useNavigate } from 'react-router-dom';

// 组件内部初始化跳转方法
const navigate = useNavigate();

// 修改提交函数
const submit = async (e) => {
  // 必须开启阻止默认提交，否则浏览器还是会原生跳POST /quiz
  e.preventDefault();
  // 因为要上传文件，不能直接传普通JSON对象，需要包装成FormData格式
  const formData = new FormData();
  formData.append('coverLetter', storedata.coverLetter);
  // cvFile是你在handleCVChange里存的上传文件对象（即e.target.files[0]）
  formData.append('cv', cvFile);

  try {
    const res = await FormService.store(formData);
    console.log('表单存储成功', res);
    // 存储成功后用前端路由跳转到/quiz，需要带数据的话可以通过url参数、Context、sessionStorage传递
    // 例：带候选人id跳转 navigate(`/quiz?candidateId=${res.data._id}`)
    navigate('/quiz');
  } catch (err) {
    console.error('表单提交失败', err);
    // 在这里加提交失败的用户提示即可
  }
};

同时简化form标签，去掉原生提交相关属性：

<form id="msform">
<!-- 删掉原来的method="post" action="/quiz" enctype="multipart/form-data" -->

2. 修正文件上传字段不匹配的问题 #

你之前文件上传input的name写的是myFile，但后端配置的upload.single('cv')会读取字段名为cv的文件，上面的FormData已经把文件字段名设为cv，和后端配置对齐，就能正常拿到上传的CV文件了。

跨页面传数据的可选方案 #

如果你需要在Quiz页面拿到之前提交的表单数据，可以选以下任意一种方式：

• 表单提交成功后，后端返回存储的候选人记录ID，跳转时拼在URL参数里，Quiz页面加载时根据ID调用接口拉取完整数据
• 你已经在使用QuizContext做全局状态管理，可以直接把提交成功的表单数据存在Context里，跳转后直接读取
• 临时把表单数据存在sessionStorage里，Quiz页面加载时读取后清除即可

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