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
Source: stackoverflow.com
Related Query
- How to get the redirected response from axios?
- How to get the response data from promise in React?
- How to fetch data in getInitialProps with redux-saga.Then get the response from redux store while in the getInitialProps method?
- How can I get the response from dispatch?
- How can I get the jsessionid from a response using react js?
- Cannot get the response made from axios call
- How to get the response data from backend to React in React-dropzone-uploader
- How to save axios GET response data as json or as same as the arrived response
- How to get a response from express server about an error using axios in react app
- How do I render the response data from axios in Reactjs
- How do I get the HTTP response code from a successful React query?
- How can I open csv file received from axios get response in new window
- React Axios Get method : Accessing key, value elements from the response
- How to pass input from React Form to Axios get request and display the request result?
- How to get the response JSON from API call
- How do I use the get request of axios by sending a query from the user and getting the values from the database for that particular query?
- How can I ensure that the axios get response is only executed once as well as accessible when passing data to child component?
- How to get images from e.target.files[0] by input id so that i can set the state of images and then post it via axios
- How to get something from the state / store inside a redux-saga function?
- How to set state of response from axios in react
- How to get the data from React Context Consumer outside the render
- How to fetch API data from Axios inside the getServerSideProps function in NextJS?
- How can I get the URL address from the browser in ReactJS (servers URL)
- How to get a downloadable file from a readableStream response in a fetch request
- How can I get a variable from the path in react router?
- How do I fix a network error received from axios response reactjs
- How to get the ID of a new object from a mutation?
- Unable to catch and log the Error response from an axios request
- how to use a type for the response from axios.get
- How can I get the image url from IPFS info in React.js?
More Query from same tag
- how to insert data as an array of objects in React JS
- React: useState() vs useRef()
- How to collect Firebase phone verification code without using JavaScript prompt in React JS
- React js does not recognize me map method
- Custom back navigation for reactnavigation back button
- React useState with an empty object causes an infinite loop
- Flask, pass dataframe as a JSON to the client in order to display it
- React JS onClick change what is being rendered
- Problem with react-signature-canvas (offset ink)
- How to change only the class i pressed on
- basic check box in react.js
- Minify / Optimize NextJS site
- Update "service-worker.js" on Single Page App when changing routes
- React Uncaught TypeError: this.state.messages.map is not a function
- Property 'value' does not exist on type 'Readonly<{}>'
- Make a second API call and return data
- npm install throwing error related to ssl
- How to get offsetTop at first loading in React?
- React Pass history to a component defined in the Router
- Seperate functions of same component into different files
- How to implement candlestick type in anychart-react npm module to react project
- Actions must be plain objects. Use custom middleware for async actions.how to solve this
- Calendar Function Call not working invalid hook call
- Storybook: Failed to execute 'createElement' on svg files using @svgr/webpack
- Revert state for second click
- Utilize external script function in React?
- why is useEffect not updating the value after the api call?
- React and using ReactDOM.createPortal() - Target container is not a DOM element Error
- curly braces and rendering list items
- react-bootstrap how to collapse menu when item is selected