阿波罗客户端不工作与CORS

Question

我在AWS 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的客户端上，我得到以下错误

对起飞前请求的响应没有通过权限改造检查：请求的资源上没有“访问控制允许起源”标头。因此，不允许访问起源http://localhost:8080。

然而，当我使用axios之类的东西执行相同的请求时，它就可以正常工作了。此外，当我只是在像邮递员这样的地方执行请求时，我看到响应上启用了“访问-控制-允许-起源”设置。这是阿波罗客户端的已知问题吗？我如何解决这个问题？

Answer 1

我们正在做的第一个错误是从“apollo boost”导入apollo客户端。实际上，我们必须从“apollo客户端”导入apollo客户端。

import ApolloClient from 'apollo-client';

因为，来自apollo的ApolloClient只支持较小的配置选项子集。阿波罗客户端的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(),
});

Answer 2

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

一个问题是：您是否为网关启用了CORS？看看如何

我相信这应该可以解决您的问题，如果您也发送cookie，您也可以设置访问-控制-允许-凭据：true标头。'

Answer 3

要解决Apollo的CORS问题，您必须将no CORS选项传递给底层的fetch。

js prettyprint-override">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-原产地申请

我想知道为什么它和Axios一起工作，我希望你在某个地方设置了no-cors模式。