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?

No, this is more likely an issue of you not being aware what a _preflight_ request is ... For what HTTP method(s) did specify that response you have shown? — CBroe, Feb 16 '18 at 12:09

score 41 · Answer 1 · answered Jul 17 '18 at 18:26

41

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.

answered Jul 17 '18 at 18:26

ivanalejandro0

1,689
13
13

4

I used mode: no-cors and it's silently stops my http headers. Is worth to mentiond that as a side effect of using no-cors – Sławomir Siudek May 30 '20 at 21:40
33

This option is not available in apollo 3.0 – Shivang Gupta Sep 25 '20 at 11:10
2

If i add `mode:'no-cors'` I am getting server side error with response code 500 I dont know how to resolve it – aditya kumar Nov 25 '21 at 15:22
4

For Apollo 3.x you put the `fetchOptions` in the `ApolloLink` options – house9 Jan 05 '22 at 18:48
@adityakumar the reason of error 500 is request header "Content-Type" is set "text/plan;charset=utf-8", and it should be "application/json". I am still finding solution. Please help if you found already. – Kapil Dev Singh Jan 12 '22 at 19:53
not working damn – myworldbox Feb 26 '22 at 21:10

Mahdi Aryayi · Answer 2 · 2022-07-23T09:41:57.333

8

Ivan's answer is correct for Apollo client 2.x.x.

For Apollo client >= 3.0.0 you can use:

import { ApolloClient, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({
      uri: 'your client uri goes here',
      fetchOptions: {
        mode: 'no-cors'
      }
  }),
});

edited Jul 23 '22 at 09:41

answered May 20 '22 at 09:57

Mahdi Aryayi

1,090
7
13

score 3 · Answer 3 · answered Feb 16 '18 at 12:02

3

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. `

answered Feb 16 '18 at 12:02

oreoluwa

5,553
2
20
27

3

I have enabled CORS in the API gateway as well. Plus when I do a simple Axios command from the same client app to the same endpoint it works fine. Its just when I try to go through apollo-client it fails. – tmp dev Feb 17 '18 at 20:21

Kirisanth Senthilnathan · Answer 4 · 2020-07-05T04:52:42.373

the first, fault we are doing is importing ApolloClient from 'apollo-boost'. Actually we have to import ApolloClient from 'apollo-client'.

import ApolloClient from 'apollo-client';

Because, ApolloClient from apollo-boost only supports a smaller subset of configuration options. ApolloClient from apollo-client gives you all the configuration options.

then we can provide link and cache only to Apollo-client instance

import { InMemoryCache } from "apollo-cache-inmemory";
import { createHttpLink } from 'apollo-link-http';

const client = new ApolloClient({ 
    link: new createHttpLink(
        {
            uri: "Your QraphQL Link"
        }
    ),
    cache: new InMemoryCache(),
});

score 0 · Answer 5 · answered Dec 11 '19 at 08:40

here is a working example. the server must have CORS enabled. that means the origin of your http request

origin: https://example.com

must match the access-control-allow-origin header of the response to your request.

access-control-allow-origin: https://example.com

Then on the Angular client you can use this module:

import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {environment} from 'src/environments/environment';
import {errorLink} from './dm-core/graphql/apollo-link-error';
import {concat} from 'apollo-link';

export function createApollo(httpLink: HttpLink) {
    return {
        link: concat(errorLink, httpLink.create({uri: environment.graphql, withCredentials: true})),
        cache: new InMemoryCache(),
        defaultOptions: {
            watchQuery: {
                errorPolicy: 'all'
            }
        }
    };
}

@NgModule({
    exports: [ApolloModule, HttpLinkModule],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink]
        }
    ]
})
export class GraphQLModule {}

Note the "withCredentials: true":

    link: concat(errorLink, httpLink.create({uri: environment.graphql, withCredentials: true})),

How do you change the origin from example.com to anything else? — Felipe Centeno, Sep 15 '20 at 03:07
the origin is sent up by the client to the server. The server just receives it in the origin header and echos it back to the client in access-control-allow-origin header. — David Dehghan, Sep 15 '20 at 08:41

apollo-client does not work with CORS

5 Answers5

Linked