reactjs - Apollo客户端查询错误: "Network error: Failed to fetch" How to troubleshoot?

Question

Apollo 服务器已设置，并且在使用 graphiql 时正确响应查询。

具有服务器端渲染功能的现有react-redux应用程序需要开始使用graphql并进行此查询。

此应用程序的一个组件已设置为执行相同的查询，它似乎正在执行网络请求，但失败了

Error: {"graphQLErrors":[],"networkError":{},"message":"Network error: Failed to fetch"}

有任何故障排除建议吗？

Answer 1

确实是cors问题。我尝试使用express 来修复它。但它不适用于 Apollo GraphQL。

const corsOptions = {
    origin: "http://localhost:3000",
    credentials: true
  };
app.use(cors(corsOptions));

因此，我尝试在 GraphQL 服务器内配置 cors，结果成功了。

对于 Apollo 服务器

const corsOptions = {
    origin: "http://localhost:3000",
    credentials: true
  };

const server = new ApolloServer({
  typeDefs,
  resolvers,
  cors: corsOptions
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

对于 GraphQL Yoga

const options = {
  cors: corsOptions
};

server.start(options, () =>
  console.log("Server is running on http://localhost:4000")
);