Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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.

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"]);

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.

I've found answer in the google docs:

Avoid Cross-Origin Fetches in Content Scripts

Old content script, making a cross-origin fetch:

var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)
New content script, asking its background page to fetch the data instead:
chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);
New extension background page, fetching from a known URL and relaying data:
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
https://www.chromium.org/Home/chromium-security/extension-content-script-fetches
https://bugs.chromium.org/p/chromium/issues
https://bugs.chromium.org/p/chromium/issues/detail?id=933893
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'])
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
It is already the most feature complete CORS tool. 
                Using Chrome 72.0.3626.121 I get past the CORS extension, but the request dies with: core.js:15723 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_2__.Observable.throw is not a function     at ApiService.push../src/app/services/api.service.ts.ApiService.logError (api.service.ts:49)     at CatchSubscriber.selector (api.service.ts:16)     at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34) ,,,
– AUSTX_RJL
                Mar 5, 2019 at 16:03
                Thanks for saving my head from banging it to wall. Only solution that worked for me is the Moesif CORS tool.
– coderpc
                Nov 6, 2019 at 22:32
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.