Question

设置了Apollo服务器，使用graphiql时它会对查询做出正确响应。

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

此应用程序的一个组件已设置为执行相同的查询，它似乎正在执行网络请求，但它失败了 Error: {"graphQLErrors":[],"networkError":{},"message":"Network error: Failed to fetch"}

有任何疑难解答建议吗？

Answer 1

我在localhost上运行apollo客户端，在someDomain.com上运行apollo服务器，所以这是一个CORS问题。在Chrome隐身模式下加载执行查询的页面并刷新后，在chrome dev工具控制台中找到了此错误：

httpLink.js:71 OPTIONS https://someDomain.com/graphql 405 (Method Not Allowed) (anonymous) @ httpLink.js:71 ... (index):1 Failed to load https://someDomain.com/graphql: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:8443' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这个（仅限测试）设置的快速修复是在快速apollo服务器上设置cors，就像这篇文章建议的那样。 https://blog.graph.cool/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d

Answer 2

这确实是核心问题。我试图通过使用快递来解决它。但这不适用于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")
);

Answer 3

如果通过Apollo在请求中传递null HEADER，也可能会发生此错误，例如：

const middlewareLink = setContext(() => ({
    headers: {
        'authorization': `Bearer ${FeedierExchanger.token}` || null
    }
}));

将其更改为：

const middlewareLink = setContext(() => ({
    headers: {
        'authorization': `Bearer ${FeedierExchanger.token}` || ''
    }
}));

或删除此部分：

|| ''

如果您具有正确的后端验证。

Answer 4

要完成以下工作，您需要做的就是为Apollo-Graphql服务器启用cors库

yarn add cors / npm install cors

现在可以找到app.js或server.js（基本上是服务器的入口文件）

在其中添加以下几行

const cors = require（'cors'）;

app.use（cors（））; //确保在此之前已将Express初始化。

Apollo客户端查询错误：“网络错误：无法获取”如何进行故障排除？

4 个答案: