axios 重定向问题解决,如何从axios获取重定向的响应？

I don't think there is a problem with the request because I have used the same request for posting a new character and it succeded.

I think the problem is with the response.

Backend using Express and Node

I have an API route which updates a character.

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(() => res.redirect('/' + id))

.catch(err => next(err));

})

When I am sending the request using Postman, I am getting the perfect response.

Frontend in React App using Axios

I am performing the same request on a React App using Axios.

export async function updateOne(inputs, cid) {

inputs = {

name: "green latern 2",

abilities: "ring, superpower",

shows: "justice league",

img: "an image",

};

cid = 11;

let err = null

const response = await axios({

method: 'PUT',

url: BASE_URL + cid,

data: inputs

}).catch(e => err = e);

console.log(response, 'was the response');

return;

}

But on doing so, I am getting this error:

Error: Network Error

createError createError.js:16

handleError xhr.js:83

dispatchXhrRequest xhr.js:80

xhrAdapter xhr.js:12

dispatchRequest dispatchRequest.js:52

promise callback*request Axios.js:61

wrap bind.js:9

updateOne apiCalls.js:36

js apiCalls.js:66

Webpack 22

was the response apiCalls.js:42

If you need more information, I shall provide what you need. Please a comment for the same

解决方案

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

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