How to make a API Call to Heroku from Chrome Extension

memahesh profile image Medam Mahesh ・1 min read

Hi Dev,

So, I am stuck here trying to make this API Call to a Heroku project from a Chrome Extension I am developing.

Alt Text

I am familiar with Flask and NodeJs.
I understand this has something to do with headers somewhere.
I tried searching but could not find a point solution.

Help me solve this problem.

Thanks in advance,


markdown guide

The issue you are facing is a common problem (security sandbox) on JS land when attempting to perform a Cross Origin Request (hence the name, CORS).

This document might give a better idea and explanation of what is happening:

tl;dr: To improve security, cross-origin fetches will soon be disallowed from content scripts in Chrome Extensions. Such requests can be made from extension background pages instead, and relayed to content scripts when needed.


And this is the official Google's documentation for Browser Extensions and XHR requests:



Hi Erick,

Thanks for responding.
I have seen this document but I don't know how to solve the problem. I have been able to use some APIs freely. This occurs only with my Heroku App. I want to know how the other websites are handling this problem. It will be great if you can explain this to me in a development point of view


Looks like the problem is on your API and not on the JS code. I did a quick test on the URL visible on your screenshot and looks like your Django API has no CORS enabled.

I do not have experience with Django, but this seems like a good answer stackoverflow.com/questions/357609....

Before you enable or install anything, it would be a good idea to read a bit more about CORS to understand the problem and the solution. developer.mozilla.org/en-US/docs/W...

Got it.
Thanks for the link.
I understand CORS. But, I did not know how to solve the problem.
You were a lot of help. Thanks again 😊.