GraphQL-Request 中间件中 Headers 对象处理的注意事项

在 graphql-request 库的使用过程中，开发者可能会遇到一个关于请求中间件（RequestMiddleware）中 Headers 对象处理的常见问题。这个问题涉及到如何在中间件中正确修改请求头信息，同时保留原有的请求头内容。

问题现象

当开发者按照官方示例代码编写请求中间件时，可能会发现以下代码无法正常工作：

const requestMiddleware: RequestMiddleware = async (request) => {
  return {
    ...request,
    headers: {
      ...request.headers,  // 这里会丢失原有headers
      'x-auth-token': await getAccessToken(),
    },
  }
}

问题在于 request.headers 是一个 Headers 类的实例，直接使用展开运算符(...)会得到一个空对象，导致原有的请求头信息丢失。

技术背景

Headers 是 Fetch API 规范中的一部分，它是一个特殊的类，用于表示 HTTP 请求和响应的头部信息。与普通对象不同，Headers 实例不能直接通过展开运算符转换为普通对象。

解决方案

方案一：使用 Headers API

正确的做法是使用 Headers 类提供的方法来操作请求头：

const requestMiddleware: RequestMiddleware = async (request) => {
  const headers = new Headers(request.headers);
  headers.set('x-auth-token', await getAccessToken());

  return {
    ...request,
    headers
  }
}

这种方法保留了 Headers 对象的特性，同时也能正确添加新的请求头。

方案二：转换为普通对象

如果需要将 Headers 转换为普通对象，可以手动处理：

const requestMiddleware: RequestMiddleware = async (request) => {
  const headersObject = {};
  request.headers.forEach((value, key) => {
    headersObject[key] = value;
  });

  return {
    ...request,
    headers: {
      ...headersObject,
      'x-auth-token': await getAccessToken(),
    }
  }
}

最佳实践建议

1. 优先使用 Headers 类提供的方法，因为它能正确处理重复头部、大小写不敏感等 HTTP 头部特性
2. 如果确实需要普通对象形式，确保完整转换所有头部字段
3. 在中间件中修改请求头时，注意不要意外丢失原有重要头部（如 Content-Type、Authorization 等）

总结