loading...

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,

Discussion

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.

chromium.org/Home/chromium-securit...

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

chromium.org/Home/chromium-securit...

 

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 😊.