Put works in Postman but not AXIOS

Question

This is the weirdest thing in my MERN app. When I do a PUT from Postman to my api it works and updates my api and mongoDB. On the front-end it doesn't update the api even though console logs are showing the correct values and the url is the same? Any help or direction would be appreciated... been playing with it for days now.

POSTMAN PROOF UPDATES WORK

The code for my axios is as follows:

handlePlayerSubmit(id, player) {
    console.log('This is the id: ' + id);
    console.log('This is the player: ' + player);

    let apiUrl = 'http://localhost:3001/api/teams';
    //sends the id and new author/text to our api
    axios.put(`${apiUrl}/${id}`, player).catch(err => {
      console.log(err);
    });

}

So I know it's firing due to the console logs... not sure why its not updating the api?

Also it's not console.logging an error.

NETWORK SCREEN SHOT IN DEV TOOLS

HEADERS FROM NETWORK TAB:

Can you check the request format in the Network tab and confirm it is correct? — Agney, Feb 18 '18 at 03:17
Are you setting the content-type to `application/x-www-form-urlencoded`? — Agney, Feb 18 '18 at 03:22
@BoyWithSilverWings I added a pic of the network screen shot — angelHank, Feb 18 '18 at 04:09
@angelHack Can you click on one of those and paste the request headers being passed? — Agney, Feb 18 '18 at 04:36
@BoyWithSilverWings thanks. just added the screen shots. Appreciate the help with this! — angelHank, Feb 18 '18 at 05:05

score 5 · Accepted Answer · answered Feb 18 '18 at 03:33

5

This is happening because Axios serializes JavaScript objects to JSON. To serialize in application/x-www-form-urlencoded format you will need to use one of the techniques described in the Axios documentation.

I think qs is a nice solution for you:

let apiUrl = 'http://localhost:3001/api/teams';
//sends the id and new author/text to our api
axios.put(`${apiUrl}/${id}`, qs.stringify(player)).catch(err => {
  console.log(err);
});

answered Feb 18 '18 at 03:33

Andy Gaskell

31,495
6
74
83

Added a screen shot of network in devtools still nothing with that qs – angelHank Feb 18 '18 at 04:13
1

Determine why your server is returning a 304. Compare every header value in postman to the headers in your application. – Andy Gaskell Feb 18 '18 at 04:35

score 1 · Answer 2 · edited Mar 17 '22 at 10:01

1

Axios doesn't like posting plain objects.

One way to workaround issue is with FormData:

let formData = new FormData();
formData.append('param1', 'hi');
formData.append('param2', 'hello');

axios({
    method: 'POST',
    url: '/api/some-endpoint/',
    data: formData
}).then(response => {
    console.log(response);
});

https://github.com/axios/axios/issues/1195

edited Mar 17 '22 at 10:01

Gal Margalit

5,525
6
52
56

answered Jan 20 '20 at 18:43

Andrew

18,680
13
103
118

Put works in Postman but not AXIOS

2 Answers2

Linked