向JSON Server提交钱包数据时POST请求出现404错误怎么办？

问题描述 #

通过表单向JSON Server添加钱包信息时，调试能看到输入数据，但POST请求返回404"文件未找到"错误。已确认能从JSON Server加载purseData数据到页面，文件存在，控制台能看到待提交的数据，但请求仍失败。

JSON数据结构 #

{
  "purseData": [
    {
      "id": 1,
      "brand": "Jimmy Choo",
      "style": "Bucket",
      "color": "pink",
      "size": "Extra Large",
      "img": "https://media.jimmychoo.com/image/upload/q_auto:best,f_auto,dpr_2.0,w_900,h_900,c_fit/USPROD_PRODUCT/images/original/BONBONBUCKETSHUT_112562_FRONT_vg04.jpg",
      "desc": "undefined",
      "condition": "fair",
      "price": "500"
    },
    {
      "id": 2,
      "brand": "Coach",
      "style": "Lori Shoulder Bag",
      "color": "Brass/Canyon Multi",
      "size": "Medium",
      "img": "https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcRvWaKEder8QK6uE_vCxZUbnB9wYzTiC0SK335iHYBsFwY5GSObnQdL66UbTLKs2wXPssbpaxA6u7GiCBeAXS4ilqrl0LtoecOv9eNvpdNwPLFo5nlgqicS1WDio9oKeB0mQg&usqp=CAc",
      "desc": "undefined",
      "condition": "new",
      "price": "1000"
    },
    {
      "brand": "Celine",
      "style": "Ava Bag in Smooth Calfskin",
      "color": "Tan",
      "size": "Medium",
      "img": "https://encrypted-tbn2.gstatic.com/shopping?q=tbn:ANd9GcQXBzeij04RjU_VxK1_ousQyBlL9K32I5yl6dfyI4_ioxAmWEWGYVEb5VLaABL91r6nyWjq2Q_tLAsS71iY9bffma7dRRfp_zhvy0D9Bs80qvaQwBJiiRgGguJDLj_LmEA-vQ&usqp=CAc",
      "condition": "new",
      "price": 2300,
      "comments": "9 X 5 X 2 IN (23 X 13.5 X 6 CM),TRIOMPHE CANVAS, TRIMMINGS IN CALFSKIN,TEXTILE LINING,GOLD FINISHING,SHOULDER AND HAND CARRY,ZIPPED CLOSURE,ONE INNER FLAT POCKET,ADJUSTABLE STRAP WITH A MINIMUM DROP 8 IN (22 CM) AND MAXIMUM DROP 9 IN (23 CM),REFERENCE : 193952BZJ.04LU",
      "seller": "Guy George",
      "id": 3
    }
  ]
}

当前addPurseCard函数代码 #

// This adds new cards to the server.
function addPurseCard(purseObj) {
    console.log("this is purse Object", purseObj)
    fetch("http://localhost:3000/purseData/purseObj", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify(purseObj)
    })
        .then(res => {
           if (res.ok) { console.log("POST request successful!!!") }
           else { console.log("POST request unsuccessful") }
           return res
        })        
        .then(res => res.json())
        .then(newPurseObj => console.log(newPurseObj))
        .then(newPurseObj => createPurseCard(newPurseObj))
        .catch((error) => console.log(error))
}

解决方案 #

404错误的核心原因是POST请求的URL路径错误：

• 你当前的请求URL是http://localhost:3000/purseData/purseObj，这里的purseObj是变量名称，被当成了路径的一部分，导致JSON Server找不到对应的资源。
• JSON Server中，向数组资源添加新数据的正确路径是直接指向数组名称，也就是http://localhost:3000/purseData。

另外，代码中还有一个小问题：then链里的newPurseObj会丢失，因为前一个then没有返回值。

修改后的函数代码如下：

// This adds new cards to the server.
function addPurseCard(purseObj) {
    console.log("this is purse Object", purseObj)
    fetch("http://localhost:3000/purseData", { // 修正URL路径
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify(purseObj)
    })
        .then(res => {
           if (res.ok) { console.log("POST request successful!!!") }
           else { console.log("POST request unsuccessful") }
           return res.json() // 直接在这里解析JSON，避免后续链中丢失数据
        })        
        .then(newPurseObj => {
            console.log(newPurseObj)
            createPurseCard(newPurseObj) // 确保拿到新创建的对象后调用渲染函数
        })
        .catch((error) => console.log(error))
}

修改说明：

1. 修正请求URL：去掉路径末尾的/purseObj，直接请求/purseData，JSON Server会自动将新对象添加到该数组中，并自动生成id。
2. 调整then链逻辑：在第一个then中直接调用res.json()并返回，确保后续then能拿到正确的newPurseObj，避免因前一个then无返回值导致后续参数为undefined。

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