使用浏览器扩展实现响应头重写功能，解决跨域问题

文档说明：只记录关键地方; 2023-01-29
环境： chromium 内核
工具： ReplaceGoogleCDN扩展

缘由：临时起意，想看deno在【微博站点或者微信公众号】中被搜索引擎收录情况,并且把结果显示在指定站点

web跨域技术有：JSONP、CORS、postMessage 、webRTC 、WebSocket、webtransport、BroadcastChannel等

目标： 浏览器扩展实现跨域 ，使用CORS实现跨域

例子总共分三步：(仅用于测试）
-- 步骤一： 添加自定义规则
-- 步骤二： 打开站点 https://www.jingjingxyk.com/ 页面下的web控制台，并执行下面的脚本
-- 步骤三：观察控制台结果（发现，跨域已经被解决，验证完毕）

步骤一： 自定义规则例子：

关键点： 设置access-control-allow-origin,最宽泛的是设置为*，当然也可以设置为指定的站点地址

{
  "action": {
    "requestHeaders": [
      {
        "header": "referer",
        "operation": "set",
        "value": "https://www.baidu.com"
      },
      {
        "header": "origin",
        "operation": "set",
        "value": "https://www.baidu.com"
      }
    ],
    "responseHeaders": [
      {
        "header": "access-control-allow-origin", 
        "operation": "set",
        "value": "*"
      },
      {
        "header": "set-cookie",
        "operation": "remove"
      }
    ],
    "type": "modifyHeaders"
  },
  "condition": {
    "initiatorDomains": [
      "justjavac.com",
      "jingjingxyk.com"
    ],
    "requestDomains": [
      "www.baidu.com"
    ],
    "resourceTypes": [
      "main_frame",
      "sub_frame",
      "stylesheet",
      "script",
      "image",
      "font",
      "object",
      "xmlhttprequest",
      "ping",
      "csp_report",
      "media",
      "websocket",
      "webtransport",
      "webbundle",
      "other"
    ],
    "urlFilter": "https://www.baidu.com/s?ie=utf-8&wd=*"
  },
  "id": 20015,
  "priority": 10
}
 

步骤二： web控制台执行如下代码

• 微博中deno被搜索引擎收录结果
• 微信公众号中deno被搜索引擎收录结果

{
   //let url='https://www.baidu.com/s?ie=utf-8&wd=deno%20site%3A%20weibo.com'
    let url='https://www.baidu.com/s?ie=utf-8&wd=deno%20site%3Amp.weixin.qq.com'
    fetch(url).then(res=>res.text()).then((res)=>{
          let content=(new DOMParser()).parseFromString(res,'text/html').body
          console.log(content)
    })
}
 

参考文档

• ReplaceGoogleCDN扩展自定义规则功能
• 使用响应头重写功能，解决跨域问题
• ReplaceGoogleCDN扩展下载和安装