在Express中添加自定义请求头的TypeScript

Question

我希望在我的请求中添加一个自定义头部，但它必须在接口中进行修改/实现。

默认的Request接口引用IncomingHttpHeaders。因此，我正在尝试使用自己的自定义令牌头扩展此接口。

import { IncomingHttpHeaders } from 'http';

declare module 'express-serve-static-core' {
    interface IncomingHttpHeaders {
        "XYZ-Token"?: string
    }
}

我已经更新了我的.tsconfig文件，使其读取./types文件夹。 我的文件名是index.d.ts

如果我不使用自定义标头，我可以成功编译代码，但当我尝试在代码中引用token标头时，会出现以下编译错误:

错误

error TS2538: Type 'string[]' cannot be used as an index type.

    req.headers['XYZ-Token']

如果我使用原始接口的任何值，一切都可以正常工作。

例子：

    req.headers['user-agent']

额外信息：我正在使用NestJS，它在底层使用Fastify/Express。我可以确认所使用的Request接口来自于Express。Fastify向后兼容所有Express模块。主要使用Fastify是因为它更快。

- Nicholas Porter

Answer 1

看起来声明中使用了错误的模块名称。

尽管将IncomingHttpHeaders接口附加到来自express-serve-static-core的Request对象上，但IncomingHttpHeaders接口的原始来源实际上是http包的一部分。

以下内容允许在代码中访问自定义标头并且编译正确。

import { IncomingHttpHeaders } from 'http';

declare module 'http' {
    interface IncomingHttpHeaders {
        "XYZ-Token"?: string
    }
}

- Nicholas Porter

Answer 2

我最近遇到了这样的问题，对我有用的解决方案是创建一个扩展自IncomingHttpHeaders类型的类型。

import { IncomingHttpHeaders } from "http2";

interface MyCustomsHearders {
    foo: "bar";
}

type IncomingCustomHeaders = IncomingHttpHeaders & MyCustomsHearders;
const { foo } = req.headers as IncomingCustomHeaders;

我知道这不是最“正式”的解决问题的方式，但对我来说很有效。

- Felipe Aguiar

Answer 3

无论出于什么原因，它认为你传递的字符串是一个数组，但除此之外，如果你需要设置自定义标头（且它不是动态值），则可以使用@Header()装饰器。如果它是动态的，则可以使用拦截器在预处理响应时捕获并在那里设置标头，类似于：

@Injectable()
export class CustomHeaderInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    return next
      .handle()
      .pipe(
        tap(() => context.switchToHttp().getResponse().header('XYZ-Token', customValue),
      );
  }
}

- Jay McDoniel

---

感谢关于@Headers的信息。通过扩展IncomingHttpHeaders接口，我能够让我的代码使用新的标头正常工作。我需要在整个API中全局应用这个变化。看起来当我声明新类型时，我仍然指定了express-serve-static-sore，而它需要是http模块。 - Nicholas Porter