getInitialProps api request to my own server doesn't get access to session object during server side rendering

I am trying to use getInitialProps to grab the data necessary for my page to render. I was hoping to do something like this:

static async getInitialProps ({req, query}) {
  let accounts = []
  const response = await axios.get('http://localhost:3000/api/accounts')
  if(response && response.data){
    accounts = response.data
  }
  return { accounts }
  }

What I find though is that if the page is loaded coming from a <Link>, the axios request has the headers you would expect for a client side request and the server provides the correct req.session info to the ‘/api/accounts’ endpoint.

If however the page is loaded directly with server side rendering, then the axios request has headers that look like this:

{ accept: ‘application/json, text/plain, /’, ‘user-agent’: ‘axios/0.16.2’, host: ‘localhost:3000’, connection: ‘close’ }

And the real issue, the req.session object is empty, and thus the ‘/api/accounts’ endpoint is missing session info that it needs.

I realize that one way to solve this problem is to create an endpoint for the page I’m trying to load on the server, and in that endpoint do the additional data queries that I need, and then the data will be passed to the page component.

To keep things simpler though, I was hoping to avoid creating a server side endpoint for the page, and only use the next.js default routing, and have that simple axios request in getInitialProps that pulls the data I need whether the request occurs during client side rendering or server side rendering.

Is it possible for the axios request which is going to my own server to have access to the session object during server side rendering?

[paulwehner]

This was working before, but for whatever reason the session isn’t being passed through anymore to the API when using Axios.

What is ever weirder, it works perfectly fine locally, but when I push it to Heroku, the Axios request isn’t passing through the data / body as part of the GET request when the page is loaded server side.

The same behavior occurs with a POST request as well. It works locally, but on Heroku server side Axios requests aren’t passing through the body.

static async getInitialProps ({req, query}) {
    let selected_account = getSelectedAccount(req)
    let stickers = null;
    let session = req && req.session ? req.session : null
    let url = req && req.headers && req.headers.host ? 'http://'+req.headers.host : window.location.origin

    try{
      //get Stickers
      const response = await axios({
        method: 'get',
        url: url+'/api/stickers?user_id='+selected_account.user_id,
	credentials: 'same-origin',
        data: {'session':session}
      })
      if(response && response.data && typeof response.data !== 'undefined' && response.data.data && typeof response.data.data !== 'undefined'){
        stickers = response.data.data
      }
    } catch(error){
      console.error(error)
    }

    return { stickers, selected_account }
}

[timneutkens]

@bntzio done 🤗