1👍
This was exactly the same issue that I was facing initially when I started building vaccine tracker application.
Reason behind the issue is that these COWIN APIs are geofenced and no server outside the Indian region would work because of geo-fencing. You might be getting "Internal Server Error" after deploying your app on heroku and must be working fine when running locally.
For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.
The Cross-Origin Resource Sharing standard works by adding new HTTP headers that let servers describe which origins are permitted to read that information from a web browser. Reference
You can use the JavaScript’s Fetch API for making HTTP requests, browsers come with a global fetch() function that we can use to make requests. The argument of fetch() is the URL with the server-side resource. We then chain the promise with the then() method, which captures the HTTP response in the response argument and call its json() method. Reference
fetch() function to send a GET request to our API
fetch(url)
.then(response => response.json())
.then(json => console.log(json));
Modern browsers use CORS in APIs such as XMLHttpRequest or Fetch to mitigate the risks of cross-origin HTTP requests.
Therefore this worked for me, making request from the clients browser instead of making api call from server to get data. Otherewise you can you try exploring HTTP proxy integration.