Google chrome extension 如何避免chrome web扩展中的跨源读阻塞（CORB）

我写了一篇文章，以避免在开发自己的web应用程序时受到CORS的限制。扩展是开发人员的工具，用于将请求从源url代理到目标url

扩展核心代码是这样的，因此开发人员可以在我的 不受CORS限制的站点和服务器端请求：

chrome.webRequest.onBeforeRequest.addListener（详细信息=>{
让重定向URL=''；
//...
重定向url=details.url.replace（TNT.validRules[i].source，TNT.validRules[i].dest）；
返回{redirectUrl}
}，{url:[']}，['blocking']）；
chrome.webRequest.onHeadersReceived.addListener（详细信息=>{
details.responseHeaders.map（项=>{
if（item.name.toLowerCase（）==“访问控制允许源”。toLowerCase（））{
item.value='*'
}
})
返回{responseHeaders}；
}，{url:['']}，[“阻止”，“响应头”]参见Moesif联合创始人提交的本期



根据他与Chronium工程师的讨论，基本上，您应该添加
extraHeaders
添加监听器时的额外选项，这将使该触发器更靠近网络，并在触发CORB之前注入头

chrome.webRequest.onHeadersReceived.addListener(details => {
  const responseHeaders = details.responseHeaders.map(item => {
    if (item.name.toLowerCase() === 'access-control-allow-origin') {
      item.value = '*'
    }
  })
  return { responseHeaders };
}, {urls: ['<all_urls>']}, ['blocking', 'responseHeaders', 'extraHeaders'])

chrome.webRequest.onHeadersReceived.addListener（详细信息=>{
const responseHeaders=details.responseHeaders.map（项=>{
if（item.name.toLowerCase（）==“访问控制允许源代码”）{
item.value='*'
}
})
返回{responseHeaders}；
}，{url:['

它已经是功能最完整的CORS工具。
我在谷歌文档中找到了答案：

避免内容脚本中的跨源抓取

旧内容脚本，进行跨源提取：

var itemId=12345；
变量url=”https://another-site.com/price-query?itemId=" +
encodeURIComponent（request.itemId）；
获取（url）
.then（response=>response.text（））
。然后（text=>parsePrice（text））
.然后（价格=>…）
.catch（错误=>…）

新内容脚本，要求其后台页面取回数据：

chrome.runtime.sendMessage(
{contentScriptQuery:“queryPrice”，itemId:12345}，
价格=>…）；

新建扩展背景页，从已知URL获取并中继数据：

chrome.runtime.onMessage.addListener(
功能（请求、发送方、发送响应）{
if（request.contentScriptQuery==“queryPrice”）{
变量url=”https://another-site.com/price-query?itemId=" +
encodeURIComponent（request.itemId）；
获取（url）
.then（response=>response.text（））
。然后（text=>parsePrice（text））
.然后（价格=>sendResponse（价格））
.catch（错误=>…）
返回true；//将异步响应。
}
});

在后台页面执行请求，并通过消息将结果发送到内容脚本。事实上，我添加了一个eventListener onHeadersReceived，并在background.js中设置了“Access Control Allow Origin”='*'。该扩展在chrome 72之前很好地工作。但现在不起作用。只是偶然发现了一个示例，它演示了我上面所说的内容。谢谢。这就是扩展不起作用的原因。我仍然需要找出解决问题的方法。不知道需要多少成本：（@wOxxOm抱歉我的英语不好。代码是否清楚地解释了我的问题？使用Chrome 72.0.3626.121我通过了CORS扩展，但请求因以下原因而终止：core.js:15723错误类型错误：rxjs_uuuwebpack_u导入的_u模块_2_uuuu。Observable.throw不是ApiService.push.的函数../src/app/services/api.service.ts.ApiService.logErrorCatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error（catchError.js:34）上的CatchSubscriber.selector（api.service.ts:49）我正在使用cors工具，这帮我解决了问题。谢谢Derrick@derrick在这个例子中“阻塞”选项是必要的吗？谢谢你让我的头不至于撞到墙上。唯一适合我的解决方案是Moesif CORS工具。主答案应该用这个答案更新。谢谢！