gatsby-source-graphql似乎没有传递cookie头，如何解决？

Question

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

我正在使用gatsby-source-graphql（https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql），最近不得不实现AWS Cloudfront Signed Cookies来授权用户访问私有登台环境，因此，对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链接（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）

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

Answer 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）

希望这对以后的人有所帮助，因为它并不琐碎。