Apollo Server：如何在浏览器中绕过Playground直接获取GraphQL查询响应

问题根源 #

浏览器默认发送的请求头Accept包含text/html，Apollo Server检测到后会优先返回Playground界面；而Postman默认发送Accept: application/json，所以直接返回查询结果。你之前禁用Playground没生效，大概率是配置方式有误。

可行解决方案 #

1. 彻底禁用Playground并确保GET请求可用 #

在Apollo Server初始化时，明确关闭Playground，同时显式开启GET请求支持（默认是开启的，但写清楚更稳妥）：

const { ApolloServer } = require('@apollo/server');
const { startStandaloneServer } = require('@apollo/server/standalone');

// 你的schema和resolvers定义
const typeDefs = `#graphql
  type Query {
    queryName: String
  }
`;
const resolvers = {
  Query: {
    queryName: () => 'Hello World',
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: false, // 直接禁用Playground
  allowGETRequests: true, // 确保GET请求能被处理
});

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

2. 保留Playground但让带query的GET请求返回JSON #

如果不想关掉Playground，只想让带query参数的URL直接返回数据，可以用两种方式：

• 手动修改浏览器请求头：打开开发者工具（F12）的Network面板，新建GET请求，把Accept头改成application/json，再发送http://localhost:4000/demo?query=queryName()，就能拿到JSON结果。
• 用Apollo插件拦截处理：编写一个插件，检测到带query的GET请求时，强制设置响应头为JSON类型：

const forceJsonForGetQueries = {
  async requestDidStart() {
    return {
      async willSendResponse({ request, response }) {
        if (request.method === 'GET' && request.query) {
          response.http.headers.set('Content-Type', 'application/json');
        }
      },
    };
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [forceJsonForGetQueries], // 加入插件
});

3. 检查Express集成的配置（如果用Express挂载） #

要是你是用Express搭建的服务，得确保expressMiddleware的配置没毛病，避免被其他中间件干扰：

const express = require('express');
const { ApolloServer } = require('@apollo/server');
const { expressMiddleware } = require('@apollo/server/express4');

const app = express();

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: false,
});

await server.start();

// 挂载到/demo路径，注意要添加express.json()中间件
app.use('/demo', express.json(), expressMiddleware(server, {
  context: async ({ req }) => ({ token: req.headers.token }),
}));

app.listen(4000);

验证 #

配置完成后，在浏览器地址栏输入http://localhost:4000/demo?query=queryName()，应该直接返回JSON格式的查询结果，不会再跳转到Playground。

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