Apollo-client: hooks + credentials: 'include' + cookies = cors error after a while ... cannot be more precise than this

[rares-lupascu]

Intended outcome:

Authentication using COOKIES

Actual outcome:

Message is: Error: Failed to fetch
For some reason ... after a few hours i get a cors errror (the standard one ... there is not Allow Origin header ....)

How to reproduce the issue:

The issues is honeslty hard to reproduce ... i trully wanted to create a sandbox but we are talking about both a front and back issus + it does not appear immediately

Versions

latest from apollo including apollo hooks

const cache = new InMemoryCache({
    addTypename: true,
})

const link = new HttpLink({
    credentials: 'include',
    uri: uris[index],
})

const client = new ApolloClient({
    cache,
    link,
})

export default client

further details:

• my entire infrastructure is on AWS
• i tried every possible combination keeping the credentials key on the HTTPLink ... the error did not go away
• as soon as i commented out credentials it did ... but now i need to switch to header authentication

So i am reasonable enough to understand it is very hard to replicate / debug this ... but since i do not know what is happening within apollo client i said i would let u guy know and this might ring a bell at some point if this is trully an apollo issue ... despite the fact that less people are using cookie auth

If anyone needs more of my input i am here ... even though i am struggling with this for more than 2 weeks

[rares-lupascu]

so now i know that the main reason of the "error failed to fetch" is the cookies
i set the cookies on the server and the domain they are coming with is "api-dev.site.com" and the frontend is on "dev.site.com"
i will set the cookie domain now to "dev.site.com" and switch credentials to "same-origin" ... maybe this will help

[tylerstar]

I encounter the same problem. When credentials was set as 'same-origin', it works. According to https://www.apollographql.com/docs/react/networking/authentication/ if server's domain is different, then use credential: "include". But that doesn't work.

[huytran2khust]

Same problem, credentials : 'same-origin' works but 'include' would throw 'Unhandled Rejection (Error): Network error: Failed to fetch'

[huytran2khust]

I figured out that this problem comes from CORS.
You have to config a cors option like :

const corsOption = { origin: "http://localhost:3000", credentials: true, }
and pass it through apollo server:
apolloServer.applyMiddleware({app, cors: corsOption});

[sinn1]

I was using app.use(cors({ origin: '*', credentials: true }) as well as apolloServer.applyMiddleware({app, cors: corsOption});

Removing app.use(cors({ origin: '*', credentials: true }) fixed it for me.

[timshingyu]

I figured out that this problem comes from CORS.
You have to config a cors option like :

const corsOption = { origin: "http://localhost:3000", credentials: true, }
and pass it through apollo server:
apolloServer.applyMiddleware({app, cors: corsOption});

@huytran2khust Cos me whole day long to fix this issue. You save my life. Thank you.

[topzdev]

I figured out that this problem comes from CORS.
You have to config a cors option like :

const corsOption = { origin: "http://localhost:3000", credentials: true, }
and pass it through apollo server:
apolloServer.applyMiddleware({app, cors: corsOption});

Thanks bro!