gatsby-source-graphql 好像没有传cookie header，怎么解决？答案

【问题标题】：gatsby-source-graphql does not seem to pass cookie header, how to solve?gatsby-source-graphql 好像没有传cookie header，怎么解决？
【发布时间】：2020-02-27 23:18:44
【问题描述】：

如何从 gatsby-source-graphql 传递 Cookie 标头？

我正在使用 gatsby-source-graphql (https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql)，最近不得不实施 AWS Cloudfront 签名 Cookie 以授权用户访问私有暂存环境，因此对 graphql 端点的请求由插件，需要在请求头中有cookie，我这样做：

{
  resolve: 'gatsby-source-graphql',
  options: {
    cookie: 'var1=val1; var2=val2; '
  }
}

以上失败，

ServerParseError: Unexpected token < in JSON at position 0

如果禁用签名 Cookie 并将端点公开，它可以工作。

而且，如果我再次将其保密并使用 curl 进行测试，则可以：

curl --cookie 'var1=val1; var2=val2; ' graphql_endpoint.com

我试图弄清楚为什么没有通过 Cookie 标头，但似乎问题出在上面插件使用的另一个插件中，称为“apollo-link-http”（https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/src/gatsby-node.js）

同时，查看 apollo-http-link (https://www.apollographql.com/docs/link/links/http/) 和此处报告的问题 (https://github.com/apollographql/apollo-client/issues/4455)，我尝试了：

{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'FOOBAR',
    fieldName: 'foobar',
    createLink: (pluginOptions) => {
        return createHttpLink({
          uri: process.env.GATSBY_GRAPHQL_API_URL,
          credentials: 'include',
          headers: {
            cookie: "CloudFront-Policy=xxxxx_; CloudFront-Key-Pair-Id=xxxxx; CloudFront-Signature=xxxxxxxxxx; path=/;",
          },
          fetch,
        })
    },
  }
},

没有成功，和之前一样的错误。

还尝试使用节点获取的获取选项，

{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'FOOBAR',
    fieldName: 'foobar',
    url: process.env.GATSBY_GRAPHQL_API_URL,
    fetchOptions: {
        credentials: 'include',
        headers: {
            cookie: "CloudFront-Policy=xxxxx_; CloudFront-Key-Pair-Id=xxxxx; CloudFront-Signature=xxxxxxxxxx; path=/;",
        },
    },
  }
},

您可以在此处看到 fetchOptions (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/src/gatsby-node.js)

没有成功！这可能是一个错误。

【问题讨论】：

标签： apollo gatsby node-fetch

【解决方案1】：

在花费大量时间查看文档和其他报告后，我根据我最初发布的尝试找到了解决方案。

我首先查看浏览器版本，并检查 cookie 标头属性名称以避免任何拼写错误。我已经确定它应该是“Cookie”，因为我发现的大多数示例都提到了“.cookie”等。

话虽如此，我已经检查了所有相关包和源代码的文档：

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/src/gatsby-node.js

https://www.apollographql.com/docs/link/links/http/
https://github.com/apollographql/apollo-client/issues/4455

最后，我声明了 headers cookie 参数，并在一个单独的属性中声明了 node-fetch 包的选项：

https://github.com/bitinn/node-fetch

结果：

{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'FOOBAR',
    fieldName: 'foobar',
    url: process.env.GATSBY_GRAPHQL_API_URL,
    headers: {
        Cookie: 'CloudFront-Policy=xxxxx_; CloudFront-Key-Pair-Id=xxxxx; CloudFront-Signature=xxxxxxxxxx; path=/;'
    },
    credentials: 'include',
  }
},

上面发生的情况是，“凭据包括”允许跨浏览器源请求并启用 cookie (https://www.apollographql.com/docs/react/networking/authentication/#cookie)

希望这对将来的其他人有所帮助，因为这不是微不足道的。

【讨论】：