Http/Https请求添加自定义header的方法

已注销
7,848 阅读6分钟

在前端世界，发起http/https请求是跟服务端通信最常见的手段，有时候会遇到这样的场景，需要添加一些自定义的header头以备服务端使用。而且在联调测试阶段这种变更是很频繁的。
So，如果你遇到这种场景会怎么做呢？是用postman发起模拟请求？或者修改代码然后本地运行？使用postman会遇到很恶心的cookie令牌问题，修改代码又太过麻烦，这里给大家介绍一种更简单更优雅的方式：全局拦截http/https请求实现添加自定义header
并且这种拦截完全可以依赖浏览器插件和全局拦截软件实现！ 在此总结了如下几种添加自定义header的方式：

方式一：Smart Header（适用于Chrome浏览器）

作为早期最普遍使用的修改http request header的插件，Smart Header朴素，简洁，使用方便...只是很久没维护了。使用方式很简单：

  • 步骤1：在Chrome中安装插件 插件地址：chrome.google.com/webstore/de… 安装后可以在浏览器插件列表里看到，也可以固定在工具栏

image.png

1-1.png

  • 步骤2：进入Smart Header配置页面配置header 点击【添加箭头 】
    -> 输入自定义header属性名，一般为x-tt-**
    -> 在右侧内容区给属性赋值，写法：value = value
    -> 点击【保存 】
    这样就完成啦！

1.png

这时候重新点击Smart Header图标就可以看到添加的新header

2.png 但是默认不会启用！需要选择新增自定义头时设置的值时才会启用。

3.png

4.png

需要注意的是这样添加后影响是全局的，可能会对一些请求造成影响，因为一些web安全容器会拒绝此类添加自定义头请求，造成请求失败。所以我们还需要第三步来完善smart header的配置。

  • 步骤3：配置自动规则（添加Filter） 步骤3其实是在步骤2的基础上的优化，在这里我们设定请求头的值时不是简单赋值，而是新增一条自动规则，smart header会检测请求元信息，只有请求匹配了我们的规则时才会给这个请求添加自定义header字段。
    -> 进入配置页面
    -> 选中自定义header
    -> 点击【自动规则】，给规则起名
    -> 【添加一个条件】
    -> 选择匹配模式并添加（支持URL，Referer，HTTP方法，请求类型四种模式）
    -> 输入匹配后赋予的值，格式：value
    -> 点击【保存】
    -> 完成自动规则配置。
    如下图所示，配置了一个URL匹配规则，只有当URL为
    www.xxx.cn 时才会添加自定义头：x-tt-zhai = zhai。

image.png

方式二：ModHeader（适用于Chrome、Firefox浏览器-推荐使用）

ModHeader插件的用途和Smart Header基本一致，但是相比来说更加使用友好，过滤器更加强大，并且支持配置多个profile，放便针对不同的场景进行配置，因部分内容和方式1基本一致在此只简单讲述，以下内容以Chrome浏览器为例。

  • 步骤1：安装 安装地址：chrome.google.com/webstore/de…
  • 步骤2：增加header和filter -> 点击【+】新增header
    -> 输入自定义header 的key，value，为了精确添加，需要增加Filters
    -> 点击【+】新增Filter
    -> 选择匹配类型并添加规则值
    -> 直接点击空白处关闭modheader配置弹框
    -> 完成配置

5.png

总的来说modheader的配置相比smart header要简单得多，这也是它更加受欢迎的原因。

方式三：Charles rewiter（适合于任何浏览器）

Charles是非常强大的抓包工具，同时她也提供了rewrite功能来重写请求、响应。基于这一点可以用来代理本地浏览器请求，这样就能满足本机任意浏览器请求添加自定义header要求，非常适合浏览器兼容性测试时访问不同环境的场景。

1.安装、配置与激活

关于Charles的安装、激活、本机代理配置已经有大量文档说明，在此就不再赘述，可以参考网上文档。

2.rewrite 添加自定义header

下面将重点将描述如何使用charles rewirite功能来添加自定义header。
-> 点击charles工具栏【Tools】
-> 【Rewrite】重写

image.png
-> 点击【Add】添加一条规则，填写规则名称

6.png -> 添加header规则，选择Type为【Add Header】，内容区的Match不用填，放空。New区域填写自定义header的name和value，在这里为x-xx-xx = 1。然后点击【OK】确认

7.png

8.png 这样在Rewrite界面就能看到新添加的规则了，接下来需要配置Location，让规则作用在指定的请求上。注意：这一步是必须的，否则规则将不会生效。

9.png

-> 点击【Add】添加Location，协议选择http / https。Host就是请求的域名，配置完域名后基本就可以了，Port、Path、Query等参数可以为空。

10.png

-> 点击【OK】后在Location栏就能看到刚才添加的域名了，因为目前很多站点同时支持https、http访问，所以最好对同一个域名同时配置https、http两种协议下的Locaton

11.png

此时，使用rewrite来添加自定义header功能就基本实现了，在浏览器中输入www.xxx.cn域名， 打开charles的过滤结果，可以发现请求已经添加了x-use-ppe，x-tt-env两个属性值：

12.png

3.charles常见问题排除：

3.1.macos系统下无法抓包

在macOS中需要配置一下charles的代理模式，启用macOS Proxy

13.png

3.2.无法抓取chrome浏览器的包

chrome浏览器有丰富的插件机制，首先确认本地的chrome是否安装有Proxy SwitchyOmega等代理插件，如有则可以先暂时关闭，如果关闭后还不行则需要自行配置代理： -> 点开配置栏，进入【设置】

14.png -> 点开【高级】，下滑到【系统】设置栏

15.png -> 点击【打开代理设置】，点开之后可以看到请选择一个协议进行配置，这个时候找到“网页代理(http)”和“安全网页代理(https)”，一般来说自己不做其他处理，直接配置代理服务器为“127.0.0.1”，端口(就是冒号:)后是“8888”。

17.png

总结

需要添加自定义请求头的场景包括但不限于：

  1. 如何注入系统常量到http请求，减少请求参数设置
  2. 添加常量到http response里 采用合适的方法实现对于提升开发、测试效率至关重要。
    最后，大家一定要记得请求头添加完毕后记得关闭smart header / modheader / charles，避免误添加引发不必要的烦恼！！！
avatar
文章
阅读
粉丝