为什么在使用 cors 进行服务器端 apollo 客户端查询时出现 500 http 错误？

Question

我正在为我的网站使用 Next.js + react-apollo + apollo-server + express。最近我添加了 cookie 身份验证，因此必须在服务器中启用 CORS 才能使 cookie 身份验证工作。但是我看到阿波罗客户端查询在服务器端执行时会导致 http 500 状态。执行客户端成功解析时相同的查询。我很困惑，因为我实际上预计问题会发生在客户端，因为 CORS 在那里有更大的影响。我不确定是什么导致了问题，欢迎提出任何建议！

错误本身如下：

ApolloError：网络错误：请求https://example.com/graphql/ 失败，原因：写 EPROTO 140152723232576:error:14094410:SSL 例程：ssl3_read_bytes:sslv3 警报握手 失败：../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1544:SSL 警报编号 40

    at new ApolloError (/src/node_modules/apollo-client/bundle.umd.js:92:26)
    at /src/node_modules/apollo-client/bundle.umd.js:1588:34
    at /src/node_modules/apollo-client/bundle.umd.js:2008:15
    at Set.forEach (<anonymous>)
    at /src/node_modules/apollo-client/bundle.umd.js:2006:26
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (/src/node_modules/apollo-client/bundle.umd.js:2004:20)
    at /src/node_modules/apollo-client/bundle.umd.js:1483:29
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  graphQLErrors: [],

networkError: FetchError: 请求https://example.com/graphql/ 失败，原因：写 EPROTO 140152723232576:error:14094410:SSL 例程：ssl3_read_bytes:sslv3 警报握手 失败：../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1544:SSL 警报编号 40

我使用的是 Amazon Cloudfront 提供的 SSL 证书。

这是我的客户端代码：

_app.js:

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
      if (pageProps.errorStatusCode && ctx.res) {
        ctx.res.statusCode = pageProps.errorStatusCode;
      }
    }

    return { pageProps };
  }
  render() { //render... }
}

我有一个用于页面查询的 HOC：

const withQuery = (Page, query, variables, errorPolicy = 'none') => {
  Page.getInitialProps = async ctx => {
    const { apolloClient } = ctx;
    try {
      const { data } = await apolloClient.query({
        query,
        variables: vars,
        errorPolicy
      });
      return { data };
    } catch (error) {
      return { errorStatusCode: error.networkError ? '500' : '404' };
    }
  };
  // if (typeof window === 'undefined') { // THIS CODE IS CAUSING THE ISSUE
  //   return Page;
  // }
}

这是我启动 apollo 客户端的方式：

import withApollo from 'next-with-apollo';
import ApolloClient, { InMemoryCache } from 'apollo-boost';
import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import introspectionQueryResultData from '../../fragmentTypes.json';

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
});

function createClient({ ctx, headers, initialState }) {
  return new ApolloClient({
    credentials: 'include',
    uri: 'some_graphql_url',
    cache: new InMemoryCache({ fragmentMatcher }).restore(initialState || {}),
    headers
  });
}

export default withApollo(createClient, { getDataFromTree: 'ssr' });

这是我的服务器代码：

import cors from 'cors'
const express = require('express')
const { ApolloServer } = require('apollo-server-express')
const { schema } = require('./models')
const server = new ApolloServer({
  schema,
})

// required settings to accept cookies
const corsOptions = {
  origin: function (origin, callback) {
    if (corsWhitelist.indexOf(origin) !== -1 || !origin) {
      callback(null, true)
    } else {
      callback(new Error(`${origin} - not allowed by CORS`))
    }
  },
  credentials: true
}

let app = express()
app.use(cors(corsOptions))
server.applyMiddleware({ app, cors: false })
const serverUrl = `my_server_url`
app.listen({ port }, () => console.log(`????  Server ready at ${serverUrl}`))

总结一下我的发现：

1. 问题源于_app.js 调用await Component.getInitialProps(ctx)。
2. getInitialProps 定义在withQuery HOC 中，查询由apolloClient.query 方法执行。

没有 CORS 一切正常。

编辑：我注意到当 headers 选项与 CORS 一起添加到 createClient 时，问题将开始发生。

EDIT2：即使没有CORS也会发生错误，将headers选项添加到创建apollo客户端的createClient就足够了。

Answer 1

我收到错误的原因是因为我将所有标头从服务器端 (express.js) 传递给 Amazon Cloudfront，包括 host 标头。因为我的网站配置为使用SNI，所以传递正确的服务器名很重要（此参数用于确定从 IP 地址为哪个虚拟主机提供 SSL 证书）。碰巧 Apollo 客户端使用 node-fetch npm 包来发出 http 请求，而后者又使用 https Node.js 模块。如果host 标头存在，则https 将服务器名设置为host 的值，否则服务器名获取主机名（mywebsite.com）的值。所以在我的例子中，服务器名称是bla.bla.elasticbeanstalk.com，这当然会导致 SSL 握手错误，因为 SSL 证书是针对 mywebsite.com 的。我写了更多信息here。

Answer 2

您的代码不完整

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`? Server ready at http://localhost:4000${server.graphqlPath}`)
);