如何获取Angular发送到Nestjs的自定义头并解决instanceof非对象报错

问题根源梳理 #

你遇到的错误和自定义头读取失败由三类问题共同导致：客户端请求头设置逻辑错误、NestJS响应注入参数缺失、CORS跨域配置错误，其中instanceof右值不是对象的报错直接源于@Res()注入时未加透传参数。

一、客户端（Angular）修正 #

原有错误点 #

1. Access-Control-*系列头是服务端返回的响应头，客户端主动设置无效且会导致跨域预检失败，需要全部删除
2. HttpHeaders的set/append方法是不可变操作，不重新赋值给headers变量的话修改不会生效
3. 方案3存在语法错误："mycustomkey", "value"应改为冒号分隔的键值对"mycustomkey": "value"
4. POST请求中responseType: "text" as "json"是无意义的强制类型转换，直接声明对应类型即可

正确代码 #

// 设置请求头
const headers = new HttpHeaders()
  .set("mycustomkey", "value")
  .set("Content-Type", "text/plain; charset=utf-8");

// 发起POST请求
return this.http
  .post(this.URL, data, {
    headers: headers,
    responseType: "text"
  })
  .pipe(
    map((response: string) => {
      return response;
    })
  );

二、服务端（NestJS）修正 #

原有错误点 #

1. 使用@Res()注入响应对象时未加{ passthrough: true }参数，会导致NestJS关闭自带的响应处理逻辑，和手动调用res.send的操作冲突，直接触发instanceof类型报错
2. 方案2存在语法错误：调用this.decrypt时传入的mycustomkey变量未定义，应该从req对象中读取
3. 异步操作没有做异常捕获，报错后会触发UnhandledPromiseRejectionWarning警告
4. 浏览器会自动将请求头转为全小写，读取时保持键名全小写即可

正确代码（两种方案可选） #

方案1：使用@Headers注解直接读取

async dycData(@Req() req, @Res({ passthrough: true }) res, @Headers('mycustomkey') mykey: string): Promise<string> {
  console.log('It is inside API');
  try {
    const rawData = await rawbody(req);
    const myData = rawData.toString().trim();
    const encryptedString = this.decrypt(myData, mykey);
    res.status(200);
    return encryptedString;
  } catch (err) {
    console.error('请求处理失败', err);
    res.status(500);
    return '处理失败';
  }
}

方案2：从req对象直接读取

async dycData(@Req() req, @Res({ passthrough: true }) res): Promise<string> {
  console.log('It is inside API');
  const mykey = req.headers['mycustomkey'];
  console.log('自定义头取值', mykey);
  try {
    const rawData = await rawbody(req);
    const myData = rawData.toString().trim();
    const encryptedString = this.decrypt(myData, mykey);
    res.status(200);
    return encryptedString;
  } catch (err) {
    console.error('请求处理失败', err);
    res.status(500);
    return '处理失败';
  }
}

三、CORS跨域配置修正 #

自定义请求头会触发浏览器的跨域预检请求，需要在NestJS的main.ts启动文件中配置CORS规则，允许自定义头通过：

// 其他启动逻辑不变，添加如下配置
app.enableCors({
  origin: 'http://localhost:替换为你的Angular服务端口',
  allowedHeaders: ['Content-Type', 'mycustomkey'],
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true
});

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