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

Question

我正在关注 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 错误。 知道我做错了什么吗？

感谢您的帮助。

Answer 1

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

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

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