apollo-client不能与CORS

时间:2018-02-16 00:44:55

标签: lambda cors apollo-client

我正在AWS Lambda上编写graphql服务器组件(不使用graphql-server)。在客户端,我使用apollo-client。关于lambda函数的响应我设置

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);

在客户端使用ApolloClient我收到以下错误

对预检请求的响应未通过访问控制检查:否' Access-Control-Allow-Origin'标头出现在请求的资源上。起源' http://localhost:8080'因此不允许访问。

然而,当我使用像axios这样的东西执行相同的请求时,它工作正常。此外,当我只是通过postman这样的请求执行请求时,我会看到" Access-Control-Allow-Origin"响应启用设置。这是apollo-client的已知问题,我该如何解决这个问题?

4 个答案:

答案 0 :(得分:9)

要解决Apollo的CORS问题,您必须将no-cors选项传递给基础的fetch

import ApolloClient from "apollo-boost";

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

这不是特定的Apollo问题,而是一种应在fetch侧解决的配置,请参阅此以获取更多信息:https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests

我想知道为什么它可以与Axios一起使用,我希望您在某处设置no-cors模式。

答案 1 :(得分:1)

我假设您正在使用AWS API网关。

有一个问题是:您是否为网关启用了CORS? See how

我认为应该解决您的问题,如果您还要发送Cookie,您也可以设置"Access-Control-Allow-Credentials" : true标题。   `

答案 2 :(得分:0)

这是一个有效的示例。服务器必须启用了CORS。这意味着您的http请求的来源

  

来源:https://example.com

必须将响应的access-control-allow-origin标头与您的请求相匹配。

  

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

然后在Angular客户端上,您可以使用以下模块:

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 {}

请注意“ withCredentials:true”:

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

答案 3 :(得分:0)

首先,我们要做的错误是 从“ apollo-boost ”导入ApolloClient。实际上,我们必须从“ apollo-client ”导入 ApolloClient

import ApolloClient from 'apollo-client';

因为 apollo-boost 中的 ApolloClient 仅支持较小的配置选项子集。 apollo-client 中的 ApolloClient 为您提供了所有配置选项。

然后我们只能向Apollo客户端实例提供链接缓存

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(),
});