react-apollo 错误：网络错误：位置 1 的 JSON 中的意外令牌 <答案

【问题标题】：react-apollo Error: Network error: Unexpected token < in JSON at position 1react-apollo 错误：网络错误：位置 1 的 JSON 中的意外令牌 <
【发布时间】：2018-06-05 15:15:28
【问题描述】：

我想通过 Apollo 向这个服务器发送一个请求并得到一个查询：

const client = new ApolloClient({ link: new HttpLink({ uri:'http://mfapat.com/graphql/mfaapp/'}), cache: new InMemoryCache() })

const FeedQuery = gql query{ allFmr{ fmrId, name, studio, bedRm1, bedRm2, bedRm3, bedRm4 } } ` 但我正面临此错误消息：

未处理（在 react-apollo:Apollo(FMRScreen) 中）错误：网络错误：意外的令牌

at new ApolloError (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:109336:32)
at ObservableQuery.currentResult (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:109447:28)
at GraphQL.dataForChild (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:103192:66)
at GraphQL.render (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:103243:37)

....

但我可以在浏览器中轻松打开“http://mfapat.com/graphql/mfaapp/”并获得查询。有谁知道问题出在哪里？

【问题讨论】：

这通常意味着响应 HTTP 请求包含 HTML（或更一般的 XML）。造成这种情况的一个原因可能是您的服务器上发生了错误，并且服务器以旨在在浏览器中查看的错误消息进行响应。这可以是您的 GraphQL 服务器或中间的服务器/代理。打开您的浏览器网络选项卡并检查网络请求以查找有关错误的更多信息（例如在响应预览视图中）。
谢谢 Herku，我有自己的服务器。在我的服务器中，使用 Django 编写的 GraphQL 查询。我在移动应用程序中编写了上面的代码。服务器端没有任何代码，这可能是问题吗？是否可以仅在服务器上安装 Apollo Server 而无需任何代码并在 ReactNative 应用程序中使用 Apollo 客户端进行查询？或者我应该在服务器端编写代码？
您用作端点的 url 是 graphiql 接口，因此您会看到 html 回来了。您还需要一个用于处理 graphql 请求并解决它们的 graphql 服务器端点。
感谢 Norm，我在服务器端使用了石墨烯，我应该为我的服务器编写类似 github.com/apollographql/apollo-tutorial-kit 这样的代码吗？
上述 graphiql 端点也服务于 graphql 请求。确保发送 Accept:application/json 请求标头。

标签： react-native graphql apollo-client

【解决方案1】：

现在，Apollo 将服务器发送的所有内容都视为 JSON。但是，如果出现错误，那么您的服务器可能会发送 HTML 以显示基本错误页面。

要查看错误，请打开您的开发工具，然后查看网络选项卡。这显示了一个示例 401 错误：

如您所见，如果您将其解析为 JSON，您会发现第一个字符：<，这是我们的错误消息的来源。

阅读发送的特定错误可以修复错误。

要修复一般错误，请将您的服务器配置为在 HTTP 错误时发送 JSON，而不是 HTML 代码。这应该允许 Apollo 解析它并显示一个合理的错误页面。

编辑：另见this discussion - 希望他们会改变默认的 Apollo 行为，或者至少提供有用的讨论。

【讨论】：

【解决方案2】：

基于@eedrah 的回答，我设法通过使用错误处理程序中间件始终以 JSON 形式返回错误来解决此问题，以便 Apollo 客户端错误链接可以解析错误。 // On Apollo server // Error handler const errorHandler = (err, req, res, next) => { if (res.headersSent) { return next(err); } const { status } = err; res.status(status).json(err); }; app.use(errorHandler);

【讨论】：