2

There were some features I wanted from apollo-server and spent some time refactoring my code to it (was previously using express-graphql). The only problem now is a "CORS" problem between my web app (using apollo-client) for authenticated requests. I recall having this problem as well back in version 1.x, and spent a lot of time wrestling with it, but my previous solution does not work in 2.x and would greatly appreciate some help for anyone who has managed to get this to work.

  • my webapp is hosted on localhost:8081
  • my server is hosted on localhost:4000

Following their code verbatim from here, I have the following:

Client code

const client = new ApolloClient({
    link: createHttpLink({
        uri: 'http://localhost:4000/graphql', 
        credentials: 'include'
    })
})

Server code

// Initializing express app code 
var app = ....
// Using cors
app.use(cors({
    credentials: true, 
    origin: 'http://localhost:8081',
}));

// Apollo Server create and apply middleware
var apolloServer = new ApolloServer({ ... });
apolloServer.applyMiddleware({ app })

When the client queries the backend via. apollo-client, I get the following error in Chrome:

enter image description here

Yet in my server code, I am explicitly setting the origin. When I inspect the network request in console, I get a contradictory story as well as Access-Control-Allow-Origin explicitly is set to http://localhost:8081

enter image description here

I don't encounter this problem when using Insomnia to query my backend server and get the expected results. Does anyone have any experience setting up apollo on client and server on localhost and successfully authenticating?

q.Then
  • 2,743
  • 1
  • 21
  • 31
  • If you have any browser extensions installed, you probably want to disable them and try again. In particular, if you have some CORS plugin/extension installed. – sideshowbarker Sep 26 '18 at 06:53
  • @sideshowbarker, I get the same error in Incognito – q.Then Sep 26 '18 at 06:56
  • So just to be clear: Do you have any CORS plugin/extension installed? If so, are you certain it’s actually disabled when you’re in Incognito mode? Because some extensions can actually still be enabled in Incognito mode. So if you do have a CORS plugin/extension installed, the only way to be certain it’s not active would be to manually disable or remove it. – sideshowbarker Sep 26 '18 at 07:19
  • I installed a fresh copy of Chromium and got the same error, so I'm fairly certain there are no plugins/extensions installed – q.Then Sep 26 '18 at 21:02
  • OK, so then as far as I can see, the only cause that seems possible here is that there’s some code in the apollo client library that’s changing the header value to the wildcard before it gets exposed to the browser engine. I’m not familiar at all with apollo but unless you can reproduce this in browsers directly (especially in Firefox, Safari, or Edge), then it seems you need to be looking for the cause somewhere in the apollo library code – sideshowbarker Sep 26 '18 at 23:24

1 Answers1

7

I'm actually just dumb. I was looking at the wrong response, sideshowbarker was onto it, apollo-server-v2 automatically overrides CORS and sets the Access-Control-Allow-Origin header to * by default. Even if your express app specifies CORS and you apply that as a middleware to the apollo-server, this setting will be overridden for GraphQL routes. If anyone faces this problem, hopefully this'll save some time:

https://github.com/apollographql/apollo-server/issues/1142

You can now specify CORS explicitly for apollo-server in its applyMiddleware method: https://www.apollographql.com/docs/apollo-server/api/apollo-server.html#Parameters-2

q.Then
  • 2,743
  • 1
  • 21
  • 31
  • You sir, are my hero. This was exactly what I figured out after seeing cors working as expected after removing apollo, and applying the middleware with cors to false fixed it. . – Hyra Jan 28 '19 at 16:42
  • Thanks here too. Wasted almost a whole day solving this problem, finding this solution. – IamSoClueless Apr 30 '20 at 09:43