如何修复来自 Axios 的随机 http 请求（404 响应）

Posted 2023-02-22

【中文标题】如何修复来自 Axios 的随机 http 请求（404 响应）

【英文标题】：How to fix random http request (404 response) from Axios

【发布时间】：2019-09-27 04:44:23

【问题描述】：

HTTP 请求按预期工作，但我看到对/%3Canonymous%3E 的附加请求返回 404。这导致 Redux 中出现以下错误：

未处理的拒绝 (TypeError)：无法读取的属性“数据” 未定义

我在其他组件的其他路由请求中看不到 404，例如来自用户组件的 /api/users。我已经更改了获取请求和路由以匹配用户的请求，但问题仍然存在。我已经在邮递员中尝试了该请求，它以预期的结果响应。对 /%3Canonymous%3E 的附加请求仅在向浏览器中的订单资源发出获取请求时（从应用程序）发生。

GET 请求：

export const getOrders = () => dispatch => 
  axios
    .get("api/orders/")
    .then(res =>
      dispatch(
        type: GET_ORDERS,
        payload: res.data
      )
    )
    .catch(err =>
      dispatch(
        type: GET_ERRORS,
        payload: err.response.data
      )
    );
;

下单路线：

router.get(
  "/",
(req, res) => 
    Order.find()
      .then(orders => res.json(orders))
      .catch(err => 
        res.json(err);
      );
  
);

getOrder Reducer：

case GET_ORDERS:
      return 
        ...state,
        allOrders:
          action.payload
      ;

整个订单减少器：

import 
  GET_ORDERS,
  ADD_ORDER,
  EDIT_ORDER,
  SET_EDITING_ORDER
 from "../actions/types";

const initialState = 
  editingOrder: ,
  allOrders: [],
  editedOrder: 
;

export default function(state = initialState, action) 
  switch (action.type) 
    case SET_EDITING_ORDER:
      return 
        ...state,
        editingOrder: action.payload
      ;

    case EDIT_ORDER:
      return 
        ...state,
        editedOrder: action.payload
      ;

    case GET_ORDERS:
      return 
        ...state,
        allOrders: action.payload
      ;

    case ADD_ORDER:
      //   state.allOrders.push(action.payload);
      return 
        ...state,
        allOrders: [...state.allOrders, action.payload]
        // newOrder: action.payload [don't need this
      ;

    default:
      return state;
  

数据以 redux 状态返回并填充，但附加的随机请求导致了问题。

【问题讨论】：

它是否首先向/api/order/ 发出正确的请求，然后向/%3Canonymous%3E 发出404？我还假设错误来自这一行payload: err.response.data?

导致 404 的请求类型是什么？ (get, put, option ...？)

@CameronDowner 是的，第一个请求是使用响应中的数据发出的。然后从 index.js 发出对 /%3Canonymous%3E 的请求。有效负载：err.response.data 具有从服务器返回的数据数组。

@BernardPagoaga 它是 GET 一个请求，没有选项，类型是 fetch，发起者是 index.js。

@CameronDowner 似乎问题出在返回的数据上。删除有问题的数据解决了这个问题。谢谢你的一切。

【参考方案1】：

这发生在我身上，直到现在我才能找到解决办法。可能是一个更具体的问题，具体取决于您正在处理的内容，但对我来说，我正在加载一个组件，该组件是我制作的 ProtectedRoute 组件，该组件正在检查我的 isAuthenticated 状态以获取渲染权限。当我单击组件的链接时它会加载，因为当前的 isAuthenticated 状态为真。但是，当我刷新页面时，它会抛出一个错误，并且我在 Redux DevTools 中注意到我的 isAuthenticated 状态已刷新并从 false 变为 true。

我的解决方案：我使用三元语句在组件内部进行渲染。它看起来像这样：

return !isAuthenticated ? (<p>Loading</p>) : (<Component />)

【参考方案2】：

最近发生在我身上，问题是来自同一请求的错误结构化响应

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。