Chrome 插件-拦截请求 Referer 实现本地开发静态资源访问

最近公司 CDN 存放的静态资源做了安全策略，如果没有携带 Referer 或者携带的 Referer 不正确，则返回 403 状态码禁止访问。

我们本地开发时一般使用 localhost 或 IP，运维并没有将这些地址加入白名单，导致本地开发时所有请求的图片都无法访问。

例如：https://statics.lotsmall.cn/lotsmallmg_vue/img/login_bg_new.4ad3a6c9.jpg

既然如此，我们可以通过修改请求时的 Referer 头来解决。

方案说明

通过 Chrome 插件的 chrome.webRequest API，拦截并修改指定域名的请求头，将 Referer 设置为允许访问的域名。

步骤详解

1. 在 Chrome 插件的 background.js 中添加如下代码：

   chrome.webRequest.onBeforeSendHeaders.addListener(function (details) {
       details.requestHeaders.push({
         name: 'Referer',
         value: 'https://wap.xxxxxxx.cn/' // 替换为目标允许的 Referer
       })
       return {
         requestHeaders: details.requestHeaders
       };
     }, {
       // 匹配静态资源的 URL
       urls: ["*://statics.xxxxxxx.cn/*"]
     },
     ["blocking", "requestHeaders", "extraHeaders"]
   )

2. 重新加载插件，确保 background.js 生效。

3. 访问本地页面，静态资源即可正常加载。

注意事项

• urls 字段请根据实际静态资源域名进行调整。
• Referer 的值需替换为目标服务器允许的域名。
• 该方法仅建议用于本地开发和调试，生产环境请遵守公司安全策略。

参考资料

• chrome.webRequest 官方文档
• Chrome 插件开发文档

---

安全提示：请勿将此类修改用于非法用途，遵守公司及相关法律法规。

---