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:

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

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?

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:

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

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?

• javascript
• cors
• apollo

Share Improve this question Follow asked Sep 26, 2018 at 6:50 q.Thenq.Then 2,75111 gold badge2424 silver badges3131 bronze badges 5

• 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 ♦ Commented Sep 26, 2018 at 6:53
• @sideshowbarker, I get the same error in Incognito – q.Then Commented Sep 26, 2018 at 6: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 ♦ Commented Sep 26, 2018 at 7: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 Commented Sep 26, 2018 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 ♦ Commented Sep 26, 2018 at 23:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./apollographql/apollo-server/issues/1142

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