Getting CORB blocked cross-origin response when dispatching action from content script

[vladfulgeanu]

This is how the content script element is created:

const store = new Store();

const storeWithMiddleware = applyMiddleware(store, thunkMiddleware);

store.ready().then(() => {
  ReactDOM.render(
    <Provider store={storeWithMiddleware}>
      <PopupApp />
    </Provider>,
    document.getElementById('counter-root'),
  );
});

And this is the mapDispatchToProps inside a component:

const mapDispatchToProps = (dispatch: AsyncDispatch) => ({
  addUrl: (url: string) => dispatch(addUrl(url))
});

And calling it simply like this:

useEffect(() => {
    const url = window.location.href;
    addUrl(url);
  }, []);

The problem is that I don't get any response from the API because it gets blocked: [Warning] Cross-Origin Read Blocking (CORB) blocked cross-origin response https://mydomain.com/api/v1/url/ with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I thought when dispatching actions from wherever (content script, popup or options page) they get run from the background, but the console from the page itself logs the response, hence is normal to get blocked as content scripts can't make cross-origin requests anymore.

When I used to do the exact same request from the popup context (not content script) it worked.

What's the approach for this? Is there anything that I am missing? Thanks a lot in advance.

[vladfulgeanu]

Fixed it by using aliases.