apollo-client不能与CORS一起使用

Question

我正在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的已知问题,我该如何解决这个问题？

Answer 1

要解决与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#跨origin_requests

我想知道为什么它适用于Axios,我希望你能将no-cors模式设置在某个地方.

Answer 2

Ivan 的答案对于 Apollo 客户端 2.xx 是正确的

对于 Apollo 客户端 >= 3.0.0 您可以使用：

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

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

Answer 3

我假设您使用的是 AWS API 网关。

您的一个问题是：您是否为网关启用了 CORS？ 怎么看

我相信这应该可以解决您的问题，如果您还发送cookie，您也可以设置"Access-Control-Allow-Credentials" : true标头。`