javascriptpostfetchjson-server

Why am I getting an 404 Error from my POST request?

Using a form I'm adding purse information to the JSON server. I can see the data I entered in the debugger as I step through the code but it ends with an error below. I have no idea why, if it gets the data I'm getting 404 "file not found". I load purse data from the Json server to the page so I new the file exist.

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
    }
  ]
}

    // 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))
}

This is the output from the console.log. It shows the data I'm attempting to add to the server: enter image description here

Below I the error I'm getting:

enter image description here

I tried stepping through the debugger and I can see the data moving through but it ends in a Post request error.

Solution

  • The routes that json-server generates are based on your JSON and follow the REST API conventions. In your case you want to add a new item to the purseData array, and the route is:

    POST /purseDate (not POST /purseData/purseObj)

    so your fetch request should be:

        fetch("http://localhost:3000/purseData", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify(purseObj)
    })