How to fix random http request (404 response) from Axios

Question

The HTTP request works as expected but I see an additional request to /%3Canonymous%3E that returns 404. This is causing the following error in Redux:

Unhandled Rejection (TypeError): Cannot read property 'data' of undefined

I don't see the 404 in requests to other routes in other components, for example, /api/users from the user component. I have changed the get requests and routes to match that of the user's but the problem still persists. I have tried the request in postman and it responds with the expected result. The additional request to /%3Canonymous%3E only happens when making get requests to the order resource in the browser (from the app).

GET request:

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

Order route:

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

Entire Order Reducer:

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

The data is returned and populated in the redux state but that additional, random request is causing the problem.

Is it making the correct request to `/api/order/` first and then a 404 to `/%3Canonymous%3E`? I also assume the error is coming from this line `payload: err.response.data`? — Cameron Downer, May 09 '19 at 11:56
What is the type of the request leading to a 404 ? (get, put, option ...?) — Bernard Pagoaga, May 09 '19 at 12:25
@CameronDowner yes, the first request is made with the data in the response. And then the request to /%3Canonymous%3E is made from index.js. payload: err.response.data has the returned array of data from the server. — Bund3, May 09 '19 at 12:29
@BernardPagoaga it's GET a request, no options, the type is fetch and the initiator is index.js. — Bund3, May 09 '19 at 12:32
Are you calling `axios.get` from anywhere else? Doesn't seem to be coming from `getOrders` action. — Cameron Downer, May 09 '19 at 16:57
@CameronDowner no. When I comment out getOrder() from the component, the error doesn't occur. Everything was working well; I just don't know what went wrong. I updated react but it was working well after the update too. Thanks for the assistance so far! — Bund3, May 10 '19 at 12:47
@CameronDowner I have updated the code with the order reducer. Thanks! — Bund3, May 10 '19 at 13:33
@Bund3 Apologies, I can't figure out where this erroneous request is coming from. Could you include where `getOrders` is being called? Or if you have online example where I could recreated the issue, that would be perfect. — Cameron Downer, May 10 '19 at 15:58
@Bund3 Ok! Suggest you delete this comment as this is a public site :) — Cameron Downer, May 10 '19 at 18:14
@Bund3 Sorry, I'm unable to replicate the original issue. That next error message can be solved here: https://stackoverflow.com/questions/8004617/javascript-cannot-read-property-bar-of-undefined — Cameron Downer, May 10 '19 at 18:27
@CameronDowner thanks for the help. I appreciate it. I'll keep debugging. — Bund3, May 10 '19 at 19:09
@CameronDowner it seems like the problem was coming from the returned data. Deleting the faulty data solved the problem. Thanks for everything. — Bund3, May 11 '19 at 00:44

score 0 · Answer 1 · answered Oct 15 '21 at 09:15

0

it happened to me recently, the problem was a wrong structured response from the same request

answered Oct 15 '21 at 09:15

Mohammed Saeed Nahlous

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 15 '21 at 10:14

score 0 · Answer 2 · edited Oct 23 '21 at 21:49

This happened to me and I wasn't able to find a fix until now. Might be a more specific issue depending on what you're working on but for me I was loading a component that I had made a ProtectedRoute Component that was checking my isAuthenticated state for permission to render. It would load when I clicked a link to the component because the current isAuthenticated state was true. However, when I refreshed the page it would throw an error and I noticed in Redux DevTools that my isAuthenticated state refreshed and went from false to true.

My Solution: I used a ternary statement to render inside my component. it looked like this:

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

score 0 · Answer 3 · answered Jul 17 '22 at 19:03

This recently happend to me and the solution was to use unique action type.

Try to replace the action type variable name along with it value. In your above code -

Replace -

GET_ORDERS 
ADD_ORDER 
EDIT_ORDER 
SET_EDITING_ORDER

With some some name which is only using in this api request only.

It will fix the issue.

How to fix random http request (404 response) from Axios

3 Answers3