apollo-client does not work with CORS

Question

I am writing a graphql server component on AWS Lambda (NOT using graphql-server). On the client side I'm using apollo-client. On the response of the lambda function I'm setting

const response = {     statusCode: 200,     headers: {         "Access-Control-Allow-Origin": "*" // Required for CORS support to work     },     body: JSON.stringify({         result: 'mock data',         input: event,     }), }; callback(null, response); 

On the client side using ApolloClient I get the following error

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

However when I execute the same request using something like axios then it works fine. Furthermore when I just execute the request over something like postman I see the "Access-Control-Allow-Origin" setting enabled on the response. Is this a known issue with apollo-client and how do I fix this?

Answer 1

To workaround the CORS issue with Apollo you have to pass the no-cors option to the underlying fetch.

import ApolloClient from "apollo-boost";  const client = new ApolloClient({   uri: "your client uri goes here",   fetchOptions: {     mode: 'no-cors',   }, }); 

This is not a specific Apollo problem, rather a configuration that is meant to be tackled on the fetch side, see this for more information: https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests

I wonder why it does works with Axios for you, I'd expect you to have the no-cors mode set somewhere.

Answer 2

I'd assume you're using the AWS API Gateway.

One question for you is: have you enabled CORS for your gateway? See how

I believe that should solve your issues, if you're also sending cookies, you can also set the "Access-Control-Allow-Credentials" : true header as well. `