方便修改http请求头和响应头的工具，Easy-Inspector

Easy-Inspector

Easy-Inspector是一个chrome插件（开发者工具），借助它，你能够修改请求头和响应头，而且把被处理的请求收集起来，方便分析。

Easy-Inspector仓库：github.com/coconilu/ea…

借助Easy-Inspector，你能够轻松实现以下场景：

1. 绕开防盗链
2. 修改cookie
3. 绕开同源策略

安装方式

1. 经过chrome网上应用店安装，搜索Easy-Interceptor，点击安装便可

2. 经过Release下载最新的插件包并解压，打开chrome的开发者模式，加载已解压的扩展程序，选择解压目录

快速开始

1. 进入设置界面。这个工具只有一个设置界面，经过点击插件的选项进入。

2. 插件的界面以下，有两个tab，规则和记录：

3. 界面功能

配置页面分为规则tab和记录tab

3.1 规则tab：

顶部是规则总开关，和两个按钮：保存配置和添加Rule：

1. 在不须要使用Easy-Inspector的时候能够把总开关关闭，将对上网没有任何影响。
2. 每次修改配置都须要保存配置让它生效。
3. 能够同时添加多条Rule，并让它们都生效。

对于每一条规则：

1. URL匹配规则 1.1. 第一个下拉框是选择资源类型，若是你不明确选择哪一个，建议你使用all 1.2. 第二个下拉框是选择字符串匹配模式，有include（包含）和reg（正则）两种方式，包含是指只要字符串被包含在URL里就行，底层使用url.include(str)匹配，正则是须要匹配正则表达式，底层使用Reg(/str/, "i").test(url)匹配 1.3. 第三个输入框是字符串（对应上面的str），依赖第二个下拉框的字符串匹配模式
2. 处理匹配到的url的请求头和响应头，对于每个请求头，都有add（添加或覆盖）和delete（删除）两种操做

资源类型有："main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", or "other"

3.2 记录tab：

记录tab是收集了全部被匹配的请求，方便你分析：

支持业务场景

1. 绕开防盗链

有一些网站会给图片设置防盗措施，大多数的作法是校验referer请求头部，使用Easy-Inspector能够很方便绕开。

为了演示方便，我把一张图片放在腾讯云cos上，并设置防盗链：

图片的链接：interceptor-1253621140.cos.ap-nanjing.myqcloud.com/IMG_1380.JP…，当你直接访问这张图片的时候，服务器会返回错误信息给你：

这张图片的防盗设置以下：

如今在Easy-Inspector里添加一条规则，以下：

再次访问图片，就能够看到图片内容，咱们能够经过记录tab看看请求头和响应头：

2. 修改cookie

cookie一般是用来校验登陆状态的，好比百度，若是你已经登陆过百度，那么百度首页的上方会显示你的头像和名字：

经过在Easy-Inspector里添加一条规则，以下：

再次访问百度，就会发现没有了登陆态：

经过记录tab能够看到，全部被匹配url的请求头都没有带上cookie。

3. 绕开同源策略

同源策略是浏览器的安全的策略，借助Easy-Inspector能够方便在开发阶段绕开同源策略，提高开发幸福指数。

为了方便演示，咱们继续用百度做为例子，咱们在另外一个网页（只要不是百度就行，好比豆瓣），而后在控制台输入以下代码：

fetch("https://www.baidu.com/").then(function(res) {
    return res.text()
}).then(function(text) {
    console.log(text)
})
复制代码

而后会看到以下错误提示：

经过在Easy-Inspector里添加一条规则，以下：

效果以下：

4. 更多

互联网世界中HTTP协议占据大头，不少业务场景能够经过处理请求头和响应头完成。

好比经过修改请求头中的User-Agent，能够假装本身的用户代理。

还有更多的使用场景等待你发掘。

感谢

这个插件主要依赖Ant Design UI组件。

Logo是借用了阿里云官网的图标(iconfont):