Apollo+React：如何使用代理使客户端和 graphql 在同一个域上？

Posted 2023-03-08

【中文标题】Apollo+React：如何使用代理使客户端和 graphql 在同一个域上？

【英文标题】：Apollo+React: How do I use a proxy so client and graphql are on the same domain?

【发布时间】：2021-03-05 13:11:52

【问题描述】：

我正在关注 Ryan Chenkie 的（优秀）安全教程，但尝试使用 graphql api 而不是他使用的 REST api。

graphql 服务器在 localhost:4000 上运行，Apollo-React 客户端在 localhost:3000 上运行。它工作正常。

现在，我想为身份验证令牌使用 cookie，因此我需要客户端和服务器位于同一个域中。 根据 Chenkie 的建议，我在 package.json 中的客户端上设置了代理

"proxy": "http://localhost:4000/"

然后在我设置了 apollo 客户端的 index.js 中，我创建一个 httplink，如下所示：

const link = createHttpLink(
  uri: "http://localhost:3000", 
  headers:  authorization: token ,  // The token in the auth header will be removed when the cookie approach is working)
);

对于 uri，我尝试了以下方法：

  uri: "http://localhost:3000"
  uri: "/graphql"
  uri: "/"
  uri: ""

我总是收到 404 错误。 知道我做错了什么吗？

感谢您的帮助。

【参考方案1】：

我犯了一个愚蠢的错误。 解决方案：您必须手动停止并重新启动客户端 React 服务器才能使代理生效。仅保存文件是不够的。

另外，HttpLink uri: "/graphql" 是正确的。它按预期工作（当您重新启动反应服务器时！）

【参考方案2】：

在您的 package.json 的代理部分中，您必须添加要代理的服务器的基本 url，在您的情况下是 GraphQL 服务器又名http://localhost:4000。

创建链接时，添加 GraphQL 接受请求的端点，通常是 /graphql，但您必须确保。

那就是：

const link = createHttpLink(
  uri: "/graphql", 
  headers:  authorization: token ,  // The token in the auth header will be removed when the cookie approach is working)
);

这意味着每个相关请求都将被代理到localhost:4000，并且对于您的HTTPLink，它将使用http://localhost:4000/graphql。

如果您仍然得到 404，请确保您的 graphql 服务器正在运行，并且 graphql 端点确实是 /graphql。

【讨论】：

谢谢菲利普，但我想我已经按照我的问题中的描述做了这个。对于 uri，我尝试了几个不同的字符串，包括“/graphql”（见上文），但都没有。还有什么想法吗？ （服务器正在运行。我不知道如何验证端点是/graphql）