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

问题描述

我编写了一个 chrome 网络扩展程序在开发我自己的网络应用程序时避免 CORS 限制.该扩展是一个开发者的工具，用于将请求从源 url 代理到 dest 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 类型应用程序/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/issueshttps://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=en

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

It is already the most feature complete CORS tool.

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