如何从 axios 获取重定向响应?

IT技术 javascript node.js reactjs express axios
2021-05-27 13:04:06

我认为该请求没有问题,因为我使用了相同的请求来发布一个新角色并且它成功了。我认为问题出在响应上

后端使用 Express 和 Node

我有一个更新字符的 API 路由

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));
})

当我使用Postman发送请求时,我得到了完美的响应。

邮递员回复图片

使用 Axios 的 React App 前端

我正在使用Axios在 React App 上执行相同的请求

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;
}

但是这样做时,我收到此错误:

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

代码可以在 GitHub 上找到:https : //github.com/uinstinct/card_builder

如果您需要更多信息,我将提供您需要的信息。请对相同的评论

3个回答

在浏览了这个类似问题的几乎所有搜索结果后,我想出了这些:

  • 来自重定向 url(由后端本身重定向)的数据无法由任何库处理 - 无论是 axios 或 fetch 还是 XMLHttpRequest 本身

这不会发生,因为后端应用程序(在这种情况下: express)发送res.status.code302基本上告诉浏览器:“您正在寻找的数据无法在此 url 中找到,但在我将您重定向到的 url 中”

这段代码在任何库中都不起作用:

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

您甚至可能会收到 CORS 错误

  • 如果您尝试重定向到一个 url,除非您使用拦截器或某种其他类型的中间件或函数来处理句柄错误,否则它甚至可能不适用于 axios 或 fetch

是的,每当后端尝试产生重定向时,axios 总会抛出错误

更多关于这里:https : //github.com/axios/axios/issues/932#issuecomment-307390761

  • 没有办法(我发现)可以从 url 获取重定向的数据,当您尝试这样做时,axios 将始终抛出错误。最好的解决方案(我发现的)是在后端应用程序本身中处理结果数据。

对于此问题中处理的特定问题,我更改了更新字符的后端路由如下所示:

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));
})

我使用了一个名为的函数getOneById(id,res)来处理获取特定字符和发送 json 响应的逻辑。

我欢迎所有的编辑和建议。如果我错了,请纠正。 请在下面留下相同的评论

在 Postman 中,您将数据作为x-www-form-urlencoded. 爱可信大概有发送数据作为JSONcontent-typeapplication/json你的 express 应用程序能够处理 json 请求吗?您需要使用 bodyParser 中间件:

通过 npm: npm i body-parser

在您的应用程序中,您需要 require 它,然后使用中间件:

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

编辑:正如评论中指出的,您也可以使用 express.json() 中间件,这是相同的。

app.use(express.json());

...没有任何安装。

您的 Postman 请求利用x-www-form-urlencoded您需要将您的inputs对象转换为 url 编码的字符串。

还将 axios 内容类型标头更改为,x-www-form-urlencoded因为默认情况下它是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);