网络错误：新 ApolloError 位置 0 处 JSON 中的意外令牌 <答案

【问题标题】：Network error: Unexpected token < in JSON at position 0 at new ApolloError网络错误：新 ApolloError 位置 0 处 JSON 中的意外令牌 <
【发布时间】：2019-04-12 01:44:45
【问题描述】：

const httpLink = createHttpLink({
  uri: 'http://localhost:3090/'
})

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})

client.query({
  query: gql`
    query users {
        email
    }
  `,
})
  .then(data => console.log(data))
  .catch(error => console.error(error));

此查询在从客户端代码获取时出错，但是当我在浏览器中 http://localhost:3090/graphql 上执行此查询时，它会正确获取数据

【问题讨论】：

在开发者控制台打开网络标签，告诉我们ApolloError是什么。
@kiarashws 为请求添加了截图
如你所见Status Code是404（未找到），这意味着给定的url不正确。
看起来您的请求没有得到 JSON 对象的答复，而是 HTML 页面 <HTML>...。通常是未处理错误的情况，为您提供默认错误页面。因为你连接到根 URL，我猜是 404？

标签： javascript reactjs express graphql apollo

【解决方案1】：

正如@Trixn 所发布的：“因此，您的服务器可能会返回一个 html 文档，其中包含以

在我的例子中，我没有在 URL 的开头加上“http://”，这会返回一个带有错误消息的 HTML 网页。

还要检查一下，通常你应该使用“https://”

【讨论】：

【解决方案2】：

在我的情况下，这个错误是由于我在 API URL 后面的斜杠而引发的。一个可能的解决方法是正确检查您的 API URL 并确保它引用了正确的 URL。

在我的例子中，我只需要去掉 URL 后面的斜杠 /。

【讨论】：

【解决方案3】：

为了以后有人发现此错误，您可能会收到此错误的另一个原因是您的 API 返回的不是 JSON。 https://medium.com/programmers-developers/one-simple-apollo-client-debugging-tip-youll-like-7877a97b9c16

我遇到了这个问题，因为从我的 API 返回的内容类型是 text/plain 而不是 application/json。在这种情况下，Apollo 允许您指定不同的主体序列化程序。 https://www.apollographql.com/docs/link/links/rest/

【讨论】：

【解决方案4】：

当您没有在查询文件中正确定义路径时会发生这种情况。这是传递参数时的类型检查错误

【讨论】：

【解决方案5】：

您向其发布查询的 graphql 端点缺少 /graphql。因此，您的服务器可能会从<html... 返回一个包含以< 开头的404 错误消息的html 文档。 Apollo 尝试将其解析为查询结果，但没有这样做。

检查httpLink 实际上是localhost:3090/graphql。

查询的语法也可以是：

{
    users {
        email
    }
}

或者如果你想命名查询：

query Users {
    users {
        email
    }
}

【讨论】：

@MukeshKumar 请将完整的错误消息添加到您的问题中。
在添加 /graphql ..?
@MukeshKumar 是的。我无法告诉你为什么没有消息就失败了。
POST localhost:3090/graphql 400 (Bad Request) index.js:1452 错误：网络错误：响应不成功：在 QueryManager.js 的新 ApolloError (ApolloError.js:58) 处收到状态代码 400： QueryManager.js:982 Array.forEach () QueryManager.js:981 Map.forEach () QueryManager.broadcastQueries (QueryManager.js:977) QueryManager.js:477跨度>
@MukeshKumar 我害怕不包含任何有用的信息。但我认为您的查询语法也不正确。必须是 gql`{ users { email } } 或 qgl`query Users { users { email } }` 。