apollo-client does not work with CORS

后端 未结 4 664
北恋
北恋 2021-02-07 14:44

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 sett

相关标签:
4条回答
  • 2021-02-07 15:27

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

    0 讨论(0)
  • 2021-02-07 15:32

    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.

    0 讨论(0)
  • 2021-02-07 15:35

    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})),
    
    0 讨论(0)
  • 2021-02-07 15:38

    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(),
    });
    
    0 讨论(0)
提交回复
热议问题