Axios Put doesn't update Value

Question

i am trying to use a PUT Request with Axios to update a Record which is not working as expected. I have the following JSON Array:

[
  {
    "Name": "Simagdo"
  }
]

which i use like this:

let jsonInput = {
"content": JSON.stringify(jsonArray)
}

And with this I am sending the PUT Request:

export const putItem = (url, content) => {
    return axios.put(url, content, {
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(response => {
        console.log(`Status: ${response.status}`)
        console.log(`Data: ${response.data}`)
        return response;
    });
}

Here i am calling the Method:

let updateLayout = {
    "content": JSON.stringify(jsonInput)
}

console.log(updateLayout)

putItem('http://localhost:8080/api/v1/saveFile/1', updateLayout)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error)
    })

When i try this, the Page refreshes but when i look at the Backend I am sending the Request to, the PUT Request hasn't changed the Value. When trying the PUT Request with a similar JSON String with Postman, everything works well.

This is the cURL output from Chrome after sending the PUT Request:

curl 'http://localhost:8080/api/v1/saveFile/1' \
  -X 'PUT' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Content-Type: application/json' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: http://localhost:3000' \
  -H 'Sec-Fetch-Site: same-site' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: http://localhost:3000/' \
  -H 'Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7' \
  --data-raw '{"content":"[{\"Name\":\"Simagdo\"}]"}' \
  --compressed

what do the api expects in the body? In this case its expecting a property named `content` to be a string, did you try to put `jsonArray` directly on the second argument of `put` without encapsulating it in a string and without the `content` obj? — tam.teixeira, Sep 27 '21 at 11:09
I have updated the Original Question. The Body needs the Property Content. — Simagdo, Sep 27 '21 at 18:19
Ok debugging steps. Open dev tools, check the put rerquest in `xhr/fetch` section, copy it as `curl`, paste/import the copied request in postman, check the difference between the one you made through postnman and the one you imported. — Jimish Fotariya, Sep 27 '21 at 18:22
not directory related, but I don't think you need `Promise` in your function. `axios` already returns a promise. — Alex028502, Sep 27 '21 at 18:24
On postman, there is a feature to export the request you are doing as code. If you export the working request as `curl`, then I am sure somebody can spot the difference between your working postman request as curl, and your not working axios request — Alex028502, Sep 27 '21 at 18:28
I have simplified putItem a bit to a function that I think will do the exact same thing. Feel free to revert my change if I am wrong about that. I don't think it is the cause of the problem.. just something that makes it easier to get to the bottom of this. You only need `new Promise` if the thing inside takes a callback as an argument - not if it already returns a promise — Alex028502, Sep 27 '21 at 18:33
I think the Problem i have is with escaping the double Quotes. When importing the curl command into Postman, it's expecting a Colon — Simagdo, Sep 27 '21 at 19:13
I have updated my original Question with the cURL Output from Chrome. — Simagdo, Sep 30 '21 at 06:39

score 1 · Accepted Answer · answered Oct 05 '21 at 06:14

I found the Solution for my Problem on my own. If anyone else has a Problem like this, this is what was missing:

In the Event Method, i forgot to call the Method preventDefault();

This is what i have now:

let updateLayout = {
    "content": JSON.stringify(jsonInput)
}

console.log(updateLayout)

event.preventDefault();

putItem('http://localhost:8080/api/v1/saveFile/1', updateLayout)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error)
    })

Axios Put doesn't update Value

1 Answers1