React Apollo 客户端不发送 cookie

Posted 2023-03-10

【中文标题】React Apollo 客户端不发送 cookie

【英文标题】：React Apollo Client not sending cookies

【发布时间】：2018-04-16 16:39:16

【问题描述】：

我已尝试按照 Apollo 客户端上的说明发送 cookie 以及 graphql 请求，但快递服务器没有收到任何 cookie，当我检查请求时，它显示响应中没有发送任何 cookie。

关注此页面：

https://www.apollographql.com/docs/react/recipes/authentication.html

我的代码是

const link = createHttpLink(
  uri: 'http://localhost:3000/api/graphql',
  opts: 
    credentials: 'include',
  
);

const client = new ApolloClient(
  link,
  cache: new InMemoryCache()
);

我的设置很简单，我只是在 localhost:3000 上使用 create-react-app 服务器，将 api 请求发送到 localhost:5000（快速 api 服务器）。我可以通过 localhost:3000 在其他路由上设置和检索 cookie，只有 Apollo Client 不发送它们。

【参考方案1】：

我不明白为什么文档会说明它的作用，尽管也许有更多经验的开发人员不会遇到问题。

无论如何，经验不足的开发人员应该注意，而不是：

const link = createHttpLink(
  uri: 'http://localhost:3000/api/graphql',
  opts: 
    credentials: 'include',
  
);

应该是：

const httpLink = createHttpLink(
  uri: 'http://localhost:3000/api/graphql',
  credentials: 'same-origin'
);

换句话说，createHttpLink 配置对象中没有单独的opts 对象。

【参考方案2】：

你的代码应该是

const link = createHttpLink(
  uri: 'http://localhost:3000/api/graphql',
  credentials: 'include'
);

const client = new ApolloClient(
  link,
  cache: new InMemoryCache()
);

详见官方文档：apollo client cookie

还要确保您的服务器为“Access-Control-Allow-Origin”标头返回正确的值。它不应该等于'*'

【讨论】：

@CSBigSur 如果我的回答对您有帮助，我将不胜感激：)

【参考方案3】：

Apollo 客户端库中有一个名为 createNetworkInterface 的助手，您可以像这样导入它：

import ApolloClient,  createNetworkInterface  from 'apollo-client';

然后你可以像这样实现它：

const networkInterface = createNetworkInterface(
  uri: 
);

Apollo 客户端假定您在 express 端的 graphql 客户端正在侦听端点 /graphql。您可以通过转到您的 server.js 文件来验证这一点。

您应该会看到如下内容：

// Instruct Express to pass on any request made to the '/graphql' route
// to the GraphQL instance.
app.use(
  '/graphql',
  expressGraphQL(
    schema,
    graphiql: true
  )
);

所以您指定的 uri: 选项仍然是 GraphQL，如下所示：

const networkInterface = createNetworkInterface(
  uri: '/graphql'
);

我们这样做是因为每当我们创建自己的networkInterface 时，它不再假定uri 是/graphql，所以我们必须直接说出来。

真正重要的部分是opts: 属性，如下所示：

const networkInterface = createNetworkInterface(
  uri: '/graphql',
  opts: 
    credentials: 'same-origin'
  
);

这意味着只要向后端服务器进行查询，就可以安全地发送 cookie。所以你把这个networkInterface 传递给 Apollo 客户端，如下所示：

const networkInterface = createNetworkInterface(
  uri: '/graphql',
  opts: 
    credentials: 'same-origin'
  
);

const client = new ApolloClient(
  networkInterface,
  dataIdFromObject: o => o.id
);

所以这就是让 Apollo 将 cookie 连同它向后端发出的每一个请求一起发送。