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”标头。因此，不允许访问 Origin 'http://localhost:8080'。

但是，当我使用 axios 之类的东西执行相同的请求时，它可以正常工作。此外，当我通过邮递员之类的方式执行请求时，我看到响应中启用了“Access-Control-Allow-Origin”设置。这是 apollo-client 的已知问题吗？我该如何解决？

Answer 1

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

import ApolloClient from 'apollo-client';

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

那么我们可以只为 Apollo-client 实例提供 link 和 cache

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

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

来源：https://example.com

必须与您的请求的响应的 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})),

Answer 3

要解决 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 模式。

Answer 4

我假设您使用的是 AWS API Gateway。

您的一个问题是：您是否为网关启用了 CORS？ See how

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