score:0

in postman you send the data as x-www-form-urlencoded. axios probably sends your data as json with a content-type of application/json. is your express app able to handle json requests? you need to use bodyparser middleware:

via npm: npm i body-parser

in your app, you need to require it and then use the middleware:

const bodyparser = require('body-parser');
// ...
// ...
app.use(bodyparser.json());

edit: as pointed out in the comments you can also use the express.json() middleware, which is the same.

app.use(express.json());

...without any installs.

score:0

your postman request makes use of x-www-form-urlencoded you need to convert your inputs object into an url encoded string.

also change the axios content-type header to x-www-form-urlencoded since by default it is application/json

headers: {
  "content-type": "application/x-www-form-urlencoded"
}

const inputs = {
  name: "green latern 2",
  abilities: "ring, superpower",
  shows: "justice league",
  img: "an image",
};


const urlencoded = object.entries(inputs).map(([key, value]) => {
  return encodeuricomponent(key) + "=" + encodeuricomponent(value);
}).join("&");

console.log(urlencoded);

score:4

after going through almost all the search results of this similar question, i figured out these:

  • data from a redirected url ( redirected by the backend itself ) cannot be handled by any library - be it axios or fetch or xmlhttprequest itself

this cannot happen because the backend application ( in this case: express ) send res.status.code of 302 which basically tells the browser that : "the data, you are looking for, cannot be found in this url but in the url i am redirecting you to"

this code simply won't work in any library:

app.get("/i/came/here",function(req,res){
 return res.redirect("/now/go/here"); // the actual data stored here
}

you might even get a cors error

  • if you trying to redirect to a url, that might not even work with axios or fetch unless you use an interceptor or some other kind of middleware or function to handle the handle error.

yes, axios will always throw an error whenever the backend tries to produce a redirect

more on this here : https://github.com/axios/axios/issues/932#issuecomment-307390761

  • there is no way ( that i found ) which can get the redirected data from the url axios will always be throwing an error when you try to do that. the best possible solution ( that i found ) is to handle the resultant data in the backend application itself.

for the particular problem dealt in this question, i changed the backend route which updates a character like this :

router.put('/:id', (req, res, next) => {
    const { id } = req.params;
    promise.all([
        updateabilities(id, req.body.abilities, next),
        updatecharacter(id, req.body.name, req.body.img, next),
        updateshows(id, req.body.shows, next)
    ])
        .then(values => console.log(values, 'are the values received at put request'))
        .then(() => getonebyid(id,res))
        .catch(err => next(err));
})

i used a function called getonebyid(id,res) which handles the logic for getting the particular character and sending a json response.

i am welcome to all edits and suggestion. please do correct if i am wrong. please leave a comment below for the same


Related Query

More Query from same tag