Forwarding headers does not work

I have two different servers:

• Next.js server that serves my app (but does not handle authentication)
• An API server that also handles authentication

When the user login in the Next.js app, their request is sent to the API server which sets anhttpOnly cookie. Every time that a Next.js page is rendered, I want to check with the API server to retrieve users’ profile information and set them in the props.

Therefore, I would need to forward the Next.js headers (which include the cookie) to the API server. But the API server does not received any of the headers that was set in withApollo.

Here is how I am connecting my Next.js app to Apollo server

import {InMemoryCache} from 'apollo-cache-inmemory';
import {ApolloClient} from 'apollo-client';
import {createHttpLink} from 'apollo-link-http';
import fetch from 'isomorphic-unfetch';
import {withApollo as _withApollo} from 'next-with-apollo';

export const withApollo = _withApollo(
    (
        {initialState, headers}: any
    ) => {
        console.log(headers);

        const isBrowser = typeof window !== 'undefined';

        const link = createHttpLink({
            uri: 'http://localhost:3000/graphql',
            ...(!isBrowser && {fetch}),
            headers,
            credentials: 'include',
        });

        const cache = new InMemoryCache().restore(initialState || {});

        return new ApolloClient({
            connectToDevTools: isBrowser,
            ssrMode: !isBrowser,
            link,
            cache,
        });
    });

The headers object contains the following items. It includes the cookie which is great:

{
  host: 'localhost:4000',
  connection: 'keep-alive',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36',
  accept: '*/*',
  'sec-fetch-site': 'same-origin',
  'sec-fetch-mode': 'cors',
  referer: 'http://localhost:4000/settings',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9,fa;q=0.8',
  cookie: 'qid=s%3AxxxbJA2e4pNmdI2g8X5yzsYrcd4mRAjr.Quta95nMS5PiSTJ8edztiTm7Dm%2FVv2agfTr6l84Q2dg'
}

On the server-side, I am simply trying to receive the same headers:

    const app = express();
    app.use((req, res) => {
        console.log(req.headers);
    });

But the only headers that the server received is the following. Therefore, the server can’t find the userId from the session (because it has not received the cookie):

 {
  accept: '*/*',
  'content-type': 'application/json',
  'accept-encoding': 'gzip,deflate',
  'user-agent': 'node-fetch/1.0 (+https://github.com/bitinn/node-fetch)',
  connection: 'close',
  'content-length': '185',
  host: 'localhost:3000'
}

[lfades]

@bmamouri Forwarding the entire headers can have unexpected issues, if you need to send a cookie token or the authentication header, only send those, e.g:

headers: {
  cookie: headers.cookie
},
credentials: 'include'

Feel free to reopen if you think this is an issue with the package itself

[yossisp]

@bmamouri Forwarding the entire headers can have unexpected issues, if you need to send a cookie token or the authentication header, only send those, e.g:

headers: {
  cookie: headers.cookie
},
credentials: 'include'

Feel free to reopen if you think this is an issue with the package itself

I suggest explicitly mentioning this in the documentation. I just had a bug when I was passing all of the headers along with the host which resulted in SSL handshake error because of SNI. It’s not self-evident that only the specific header should be passed.

Also I wanted to ask: the host is coming from express.js server. In my case it contained something like blabla.elasticbeanstalk.com because the container runs inside aws. Of course as I mentioned this didn’t work so I had to manually set it to mysite.com. But what sets the host header when headers are not passed in ApolloClient constructor?