前端提交任务触发AxiosError(状态码500)，Postman请求正常求排查

最可能的原因：Axios请求头配置拼写错误 #

你的代码里Axios的config对象中，header是单数，正确的应该是**headers（复数）**。这个拼写错误会导致请求的Content-Type头没有被正确设置，后端无法正确解析JSON格式的请求体，从而返回500错误。

修正后的核心代码： #

async function handleSubmitTask(){
    try {
        setLoading(true); // 建议把loading状态设置放到try开头，确保点击后立即显示加载状态
        const config = {
            headers: { // 这里改为复数headers
                "Content-type": "application/json",
            },
        }
        const {data} = await axios.post("/api/tasks", {taskName}, config)
        // 可添加成功提示
        toast({
            title: "任务添加成功",
            status: "success",
            duration: 3000,
            isClosable: true,
        })
    } catch (err) {
        console.log(err);
        toast({
            title: "添加失败",
            description: err.response?.data?.message || "服务器内部错误",
            status: "error",
            duration: 3000,
            isClosable: true,
        })
    } finally { // 用finally确保无论请求成功失败，都能重置loading状态
        setLoading(false)
    }
}

其他排查方向 #

如果修正拼写后仍报错，可以检查以下几点：

• 字段名匹配：确认后端接口期望的字段名是taskName还是其他格式（比如task_name），Postman中你可能用了正确字段，但前端传参不匹配会导致后端解析失败。
• 空值校验：前端未做输入校验，若taskName为空时提交，后端可能因未处理空值抛出异常，而Postman中你可能传入了非空值。可在提交前添加校验：

  if (!taskName.trim()) {
      toast({title: "请输入任务名称", status: "warning"});
      return;
  }
  

• 查看后端日志：500是服务器内部错误，直接查看后端的错误日志，能快速定位具体问题（比如数据库操作失败、参数解析异常等）。
• 请求路径一致性：确认前端Axios的请求路径/api/tasks和Postman中使用的完全一致，避免因baseURL配置差异导致请求地址错误。

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