如何避免Chrome Web扩展程序中的跨域读取阻止(CORB) [英] How to avoid Cross-Origin Read Blocking(CORB) in a chrome web extension

问题描述

我写了 chrome网络扩展以避免在开发自己的Web应用程序时出现CORS限制.该扩展程序是开发人员的工具，用于将请求从源URL代理到目标URL.

I wrote a chrome web extension to avoid CORS limitation when developing my own web apps. The extension is a developers' tool and used to proxy the request from the source url to the dest url.

这样的扩展核心代码，因此开发人员可以在我的网站上开发页面 网站并向其服务器端提出请求，而不受CORS的限制:

The extension core code like this, thus developers can develop their pages on my site and request to their server side without CORS limitation:

chrome.webRequest.onBeforeRequest.addListener(details => {
  let redirectUrl = '';
  //...
  redirectUrl = details.url.replace(TNT.validRules[i].source, TNT.validRules[i].dest);
 return {redirectUrl}
}, {urls: ['<all_urls>']}, ['blocking']);


chrome.webRequest.onHeadersReceived.addListener(details => {
  details.responseHeaders.map(item => {
    if (item.name.toLowerCase() == 'Access-Control-Allow-Origin'.toLowerCase()) {
      item.value = '*'
    }
  })
  return {responseHeaders};
}, {urls: ['<all_urls>']}, ["blocking", "responseHeaders"]);

但是最新的Chrome 72无法代理该请求.控制台错误是:

But the latest Chrome 72 cannot proxy the request. And the console errors are:

跨源读取阻止(CORB)阻止了跨源响应 https://xxxxxxx.com/abc.json?siteId=69 MIME类型为application/json.看 https://www.chromestatus.com/feature/5629709824032768 了解更多 详细信息.

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://xxxxxxx.com/abc.json?siteId=69 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

推荐答案

请参阅Moesif联合创始人提出的此问题.

See this issue filed by co-founder at Moesif.

https://bugs.chromium.org/p/chromium/issues https://bugs.chromium.org/p/chromium/issues/detail ?id = 933893

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

Based on his discussion with Chronium engineers, basically, you should added extraHeaders into extra options for when adding listeners, which will pull this trigger closer to the network and inject the headers before CORB gets triggered.

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'])

顺便说一句，这里有一些自我提升.您为什么不只使用我们的CORS工具

Btw, a little self promotion here. Why don't you just use our CORS tool,

https://chrome.google. com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl = zh-CN

它已经是功能最齐全的完整CORS工具.

It is already the most feature complete CORS tool.

这篇关于如何避免Chrome Web扩展程序中的跨域读取阻止(CORB)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！