如何在GraphiQL中启用HTTP Headers选项卡并设置请求头

缺失Headers选项卡的原因 #

express-graphql内置的GraphiQL是旧版本，该版本界面本身未提供HTTP Headers设置选项卡，这是核心原因。

设置HTTP请求头的方法 #

方法1：替换为Apollo Server（推荐） #

express-graphql已处于维护状态，功能更新停滞。换成apollo-server-express可获得自带Headers选项的GraphQL Playground，步骤如下：

• 安装依赖：npm install apollo-server-express express graphql
• 修改服务器代码：

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

// 定义schema和resolver
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

async function startServer() {
  const app = express();
  const server = new ApolloServer({ typeDefs, resolvers });
  
  await server.start();
  server.applyMiddleware({ app });

  app.listen({ port: 5000 }, () =>
    console.log(`Server ready at http://localhost:5000${server.graphqlPath}`)
  );
}

startServer();

启动后访问http://localhost:5000/graphql，即可看到带Headers选项卡的界面，直接设置请求头即可。

方法2：手动为现有express-graphql添加Headers支持 #

若不想更换框架，可通过graphiqlOptions注入自定义HTML，添加Headers输入区域：

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = {
  hello: () => 'Hello world!',
};

const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: {
    html: `
      <!DOCTYPE html>
      <html>
        <head>
          <title>GraphiQL</title>
          <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
        </head>
        <body style="margin: 0;">
          <div id="graphiql" style="height: 100vh;"></div>
          <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
          <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
          <script src="https://unpkg.com/graphiql/graphiql.min.js"></script>
          <script>
            const graphQLFetcher = async (graphQLParams) => {
              const headersInput = document.getElementById('headers-input').value;
              let headers = {};
              try {
                headers = headersInput ? JSON.parse(headersInput) : {};
              } catch (e) {
                alert('Headers格式错误，需为JSON');
              }
              
              const response = await fetch(window.location.origin + '/graphql', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                  ...headers
                },
                body: JSON.stringify(graphQLParams),
              });
              return response.json();
            };

            ReactDOM.render(
              React.createElement(
                'div',
                { style: { display: 'flex', flexDirection: 'column', height: '100vh' } },
                React.createElement('div', { style: { padding: '10px', borderBottom: '1px solid #eee' } },
                  React.createElement('label', null, 'HTTP Headers (JSON):'),
                  React.createElement('textarea', {
                    id: 'headers-input',
                    style: { width: '100%', height: '80px', marginTop: '5px' },
                    placeholder: '{"Authorization": "Bearer token"}'
                  })
                ),
                React.createElement(GraphiQL, { fetcher: graphQLFetcher })
              ),
              document.getElementById('graphiql')
            );
          </script>
        </body>
      </html>
    `
  },
}));

app.listen(5000, () => console.log('Server running on http://localhost:5000/graphql'));

启动后访问，顶部会出现Headers输入框，输入JSON格式的请求头即可（比如{"Authorization": "Bearer your-token"}）。

方法3：使用外部工具调试 #

无需修改代码，可借助Postman、Insomnia或curl发送带Headers的请求：

• Postman：新建POST请求，地址填http://localhost:5000/graphql，Headers添加Content-Type: application/json及其他所需头；Body选raw-JSON，输入GraphQL查询（如{"query": "{ hello }"}）。
• curl：命令示例：

curl -X POST http://localhost:5000/graphql \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your-token" \
  -d '{"query": "{ hello }"}'

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