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

Posted 2023-03-10

【中文标题】TypeScript 在 Express 中添加自定义请求标头

【英文标题】：TypeScript add custom Request header in Express

【发布时间】：2020-03-16 20:46:09

【问题描述】：

我正在尝试向我的请求添加 自定义标头，但必须在界面中对其进行修改/实现。

默认的Request 接口引用IncomingHttpHeaders。所以我试图用我自己的自定义令牌头来扩展这个接口。

import  IncomingHttpHeaders  from 'http';

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

我已更新我的.tsconfig 文件以读取./types 文件夹。我的文件名是index.d.ts

如果我不使用自定义标头，我可以成功编译代码，但是当我尝试在代码中引用令牌标头时，我收到以下编译错误：

错误

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

    req.headers['XYZ-Token']

如果我使用原始界面的任何值，一切正常。

示例：

    req.headers['user-agent']

其他信息：我正在使用 NestJS，它在后台使用 Fastify/Express。我可以确认正在使用的请求接口来自 Express。 Fastify 向后兼容所有 Express 模块。主要使用 Fastify，因为它更快。

【参考方案1】：

声明中的模块名称似乎有误。

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

以下允许自定义标头可在代码中访问，ts 正确编译。

import  IncomingHttpHeaders  from 'http';

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

【参考方案2】：

无论出于何种原因，它认为您传入的字符串是一个数组，但除此之外，如果您需要设置自定义标头（并且它不是动态值），您可以使用@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),
      );
  

【讨论】：

感谢@Headers 提供的信息。通过扩展 IncomingHttpHeaders 接口，我能够让我的代码使用新的标头。我需要在整个 API 中进行全局更改。看起来当我声明新类型时，我仍在指定 express-serve-static-sore，它需要是 http 模块。