Chrome插件-拦截请求

2024年5月5日

预计阅读：1min

最近公司CDN存放的静态资源做了安全策略如果没有携带Referer或者携带的Referer不正确，则返回403状态码禁止访问，我们本地开发的时候一般都是localhost或者IP,而运维并没有吧这些配到白名单里面，这样导致我们本地开发的时候所有请求的图片都是访问不了的，如：https://statics.lotsmall.cn/lotsmallmg_vue/img/login_bg_new.4ad3a6c9.jpg 既然这样那我们请求的时候修改Referer不就行了

匹配对应的域名修改其请求头

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

以上代码放到 Chrome插件background.js 里面

chrome.webRequest

Edit on GitHub