Vue.js项目中POST方法无法生效，请求排查原因

API 探路者

2026-8-9

问题原因及解决方案

你的代码存在几个关键问题，导致产品数据无法成功添加：

1. 提交按钮无法触发表单提交事件

表单内的按钮是 <input type="button">，该类型按钮不会触发form的submit事件，你绑定的@submit.prevent="submit"自然不会执行。
解决：将按钮类型改为submit：

<input type="submit" value="Add Product">

2. ID生成方式不兼容JSON格式

你用(Math.random() * 10000000000000000n)生成BigInt类型ID，但JSON不支持BigInt数据类型，提交给JSON Server时会触发错误。而且JSON Server默认会自动生成递增ID，完全无需手动设置。
解决：移除手动生成ID的代码，提交对象仅传递name和price：

body: JSON.stringify({ name: name.value, price: price.value })

3. Price的初始类型与输入框不匹配

price绑定的是number类型输入框，但你初始化时用了ref("")（字符串类型），提交时可能会把字符串传给后端，导致JSON Server无法正确处理数据。
解决：将price初始化为数字类型：

const price = ref(0);

4. 未处理请求错误

当前代码没有捕获fetch请求的错误，就算请求失败（比如JSON Server未启动、地址错误），也会直接跳转页面，你无法得知问题所在。
解决：添加错误捕获逻辑：

const submit = async () => {
  try {
    const response = await fetch("http://localhost:3000/products", {
      method: "POST",
      headers: { "Content-type": "application/json" },
      body: JSON.stringify({ name: name.value, price: price.value })
    });
    if (!response.ok) {
      throw new Error("请求失败");
    }
    await router.push("admin/products");
  } catch (err) {
    console.error(err);
    alert("添加产品失败，请检查JSON Server是否运行");
  }
};