前端性能监控
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 前端性能监控 > 最佳实践 > Aegis SDK 支持获取请求头和返回头

Aegis SDK 支持获取请求头和返回头

最近更新时间：2023-11-13 11:14:42

我的收藏

本页目录：

通过记录自定义请求头和响应头的方式，打通前后端链路。
说明：
目前仅支持 aegis-web-sdk 和 aegis-mp-sdk。

操作步骤

获取 Response Headers

假设有一个接口 `https://aegis.qq.com/generateOrderInfo`，该接口的有一个自定义的 Response Headers `x-request-id`，值是 `monitor`，为前后端打通的唯一标识。



假设需要通过记录这个值到 RUM 来打通前后端的链路，实践步骤如下：
1. 将 SDK 升级到最新版本。
2. 修改初始化 SDK 的方式。
  new Aegis({
        id: 'xxx',
        reportApiSpeed: true,
        api: {
            apiDetail: true, // 上报接口请求参数和返回值
            reportRequest: true, // 全量接口上报
            reqHeaders: ['sw8'], // 记录 request header
            resHeaders: ['x-request-id', 'content-type', 'server'] // 记录 response header，注意使用小写
        },
    });
 3. 暴露 unsafe header
完成步骤1和步骤2后，会发现 `content-type` 赋值了，但是 `x-request-id` 和 `server` 还是没有赋值。
此时使用 xhr.getResponseHeader() 去获取相关 header，会发现并没有获取值，而且浏览器会出现报错信息。



说明：
具体报错原因可参见 相关文档。
此时需要暴露 unsafe header，给需要上报的接口加上 Access-Control-Expose-Headers，如下所示：
   location /generateOrderInfo {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers 'sw8';
        add_header Access-Control-Expose-Headers 'x-request-id, server';
        proxy_pass http://9.139.xx.xx:9301/generateOrderInfo;
    }
上报效果如下：




获取 Request Headers

获取 request headers 的使用方式获取 response headers 的方式大致相同，只需要在初始化的时候传入需要标记的 header 即可获取。
 new Aegis({
        id: 'xxx',
        reportApiSpeed: true,
        api: {
            apiDetail: true, // 上报接口请求参数和返回值
            reportRequest: true, // 全量接口上报
            reqHeaders: ['sw8'], // 记录 request header
        },
    });
获取 request header 不会有浏览器的安全限制，添加较为方便。
添加后若接口请求中有 request header，即可在日志中看到相关数据。




自动获取 trace header

目前 Aegis SDK 已经实现自动解析 opentelemetry、skywalking、sentry 等 trace 协议的 header，并且自动进行上报，如果用户同时接入具有 trace 能力的 SDK，可以实现 traceid 自动识别功能。




跨域问题

如果接口添加了自定义 header，会导致接口请求跨域，需要对接口进行处理才能上报。例如：下列例子中需在项目的请求添加 `sw8`，在 nginx 中的配置添加 Access-Control-Allow-Headers 。
 location /generateOrderInfo {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers 'sw8';
        add_header Access-Control-Expose-Headers 'x-request-id, server';
        proxy_pass http://9.139.xx.xx:9301/generateOrderInfo;
    }

常见问题

什么情况下会用到记录请求 request header ？

例如您通过随机 key 给请求添加标记，作为 traceid 的情况；或者您接入除了 aegis 以外的第三方可观测 SDK。
具体使用 skywalking 打通前后端的方式可以参见 前后端链路打通。
结合记录请求 request header，并通过 skywalking 打通前端和后端 API 调用链路后，即可在 RUM 上看相关前端请求信息、前端请求错误信息和前端性能数据等。
中国站