How to fix, "Error: Request failed with status code 404" in axios Next js

javascript reactjs nginx axios next.js

15,078

So the problem is that getInitialProps get executed in the server and axios can not run the server use https://www.npmjs.com/package/isomorphic-fetch instead.

15,078

Author by

Abhi

Updated on June 04, 2022

Comments

Abhi almost 2 years

I am using next js when trying to call an API endpoint(dispatching a redux action)in getInitialProps. I am getting the 404 error, my /api/ is proxied in nginx server, all other routes work very well only this route is causing the problem.

I have tried by changing the api fetch function call to async but still the same error.

static async getInitialProps({ store, query: { id } }) {
    await store.dispatch(fetchP(id));
    console.log('GetIntial');
    return { id };
 }

My action creator

export const fetchp = id => async dispatch => {
  dispatch({ type: FETCH_P_DETAILS_STARTED });
  await API.get(`ps/${id}`)
    .then(res => {
      console.log(res);
      dispatch({
        type: FETCH_P_DETAILS_SUCCESS,
        payload: res.data.data,
      });
    })
    .catch(err => {
      console.log(err);
      if (!err.response) {
        // network error
        err.message = 'Error: Network Error';
        console.log(err.message);
      } else if (err.code === 'ECONNABORTED') {
        console.log('Timeout');
      } else {
        err.message = err.message;
      }
      dispatch({
        type: FETCH_P_DETAILS_FAILURE,
        payload: err.message,
      });
    });
};

My nginx config

  location /api/ {
    proxy_pass http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

Error Response Error: Request failed with status code 404 at createError (/home/ubuntu/mainWebApp/node_modules/axios/lib/core/createError.js:16:15) at settle (/home/ubuntu/mainWebApp/node_modules/axios/lib/core/settle.js:18:12) at IncomingMessage.handleStreamEnd (/home/ubuntu/mainWebApp/node_modules/axios/lib/adapters/http.js:202:11) at IncomingMessage.emit (events.js:198:15) at endReadableNT (_stream_readable.js:1139:12) at processTicksAndRejections (internal/process/task_queues.js:81:17)

evgeni fotia almost 5 years

what does console.log(id) return inside getInitialProps
Abhi almost 5 years

@evgeni fotia it prints the correct id value

Abhi almost 5 years

i tried to console.log(id) in getIntialProps but it is not logging in console, I think getInitialprops is not executed.
evgeni fotia almost 5 years

@AbhiKanimilli try console.log('Heloooooooooooo') because what you say doesn't make sense if getIntialProps doesn't get executed there will be no request
Abhi almost 5 years

await store.dispatch(fetchPg(id)); console.log('Heloooooooooooo'); console.log(id);
Abhi almost 5 years

if i log after dispatch it is not loging
evgeni fotia almost 5 years

@AbhiKanimilli that's normal. the important is that it log id before await API.get(ps/${id}). so just change axios to the above package
Abhi almost 5 years

before await API.get() it is logging the correct id to console.
evgeni fotia almost 5 years

@AbhiKanimilli if the above package worked for you mark the qestion as answered ✔
Abhi almost 5 years

i am trying to use above package but it gives TypeError: Only absolute URLs are supported
evgeni fotia almost 5 years

@AbhiKanimilli github.com/zeit/next.js/issues/1213#issuecomment-280978022