Browser is aborting axios get request

Question

I have a React(CRA)/Node/Express app with Google OAuth signin implemented (with passport as a helper) and cookie session, the whole OAuth flow works just fine i.e. Google is requesting my callback api route and consecuently my server is redirecting the client to the homepage of my app and assigning the user data to a cookie.

However I need the user data as a Json so I can put it in my redux store, for this I'm making an extra api call in the homepage this way:

React:

useEffect(() => {
  const getUser = async () => {
    const user = await axios.get('https://localhost:3001/auth/getuser', { withCredentials: true });
    // and here I would like to dispatch an action to set the user data in the redux store
  }
  getUser();
}, [])

Node:

app.get('/auth/getuser', (req, res) => {
  if (req.user) {
    return res.status(200).json({ user: req.user });
  } else {
    return res.status(200).json({ error: 'there is not logged user!' })
  }
})

Of course the first time a user navigate to my app that getUser function is not going to return anything because there is not cookies set yet, but the idea is that when Google redirects the client to the homepage there will be also a cookie with the user data.

But here comes the issue, the axios request is being aborted both when the user lands the homepage for the first time and when Google redirects the user to the homepage, here is the error stack:

Error: Request aborted
    createError createError.js:17
    handleAbort xhr.js:114
    dispatchXhrRequest xhr.js:109
    xhrAdapter xhr.js:24
    dispatchRequest dispatchRequest.js:46
    request Axios.js:111
    method Axios.js:132
    wrap bind.js:11
    getUser src_pages_auth-page_auth-page_component_tsx.chunk.js:169
    Signin src_pages_auth-page_auth-page_component_tsx.chunk.js:178

I know is the browser the one aborting the axios call because when I click dispatchXhrRequest in the error stack it takes me to the axios.js file on this line:

// Handle browser request cancellation (as opposed to a manual cancellation)

request.onabort = function handleAbort() {
  // ... axios code here
};

Some extra info:

All this is happening in localhost.
My server have a selfsigned certificate so the routes are https.
CRA serves the apps through http per default but I tested enabling https and I get the same error.
React is served in port 3000 and my server in port 3001.

What I'm doing wrong?

Browser is aborting axios get request

0 Answers