Express集成express-graphql报Unexpected token < in JSON错误如何解决

你遇到的报错本质是接口返回了HTML格式内容（首字符为<），但调用方期望解析JSON格式数据，导致解析失败。问题根源是你仅给/graphql路由绑定了GET请求方法：

• GET方法仅用来加载GraphiQL可视化调试界面，返回的是HTML内容
• 实际的GraphQL查询请求默认使用POST方法，请求会因为路由不匹配，返回404错误页的HTML内容，触发解析报错

直接将路由绑定方式从app.get改为app.all，同时支持GET和POST请求即可：

const express = require('express');
const {graphqlHTTP} = require('express-graphql');
const schema = require('./schema/schema');

const app = express();

// 替换原来的app.get为app.all
app.all('/graphql', graphqlHTTP({
    graphiql:true,
    schema: schema
}))

app.listen(4000,()=>{
    console.log("listening to port 4000..")
})

如果需要更精细化控制，也可以分别绑定GET和POST路由：

const graphqlHandler = graphqlHTTP({
    graphiql:true,
    schema: schema
})
app.get('/graphql', graphqlHandler)
app.post('/graphql', graphqlHandler)

修改路由后如果依然报错，可以检查两个点：

• 确认调用方请求的地址、端口、路径和服务端配置完全一致，避免拼写错误触发404页面
• 不要直接在浏览器地址栏发送查询请求，地址栏默认的GET请求不带查询参数时返回的是GraphiQL调试页，正常查询操作需要在GraphiQL界面内完成，或者调用方请求时携带符合规范的GraphQL查询参数

内容的提问来源于stack exchange，提问作者AmanChauhan