I have a react project and I have an API to access endpoints from a server I do not control.
When I send a GET request with a valid argument, for example:
getAllDelegatorRewards: async(address_) => {
try {
const res = await axios.get(`${SOME_ENDPOINT}/delegators/${address_}/rewards`);
...
return res;
}
catch (err) {
console.log(err.response.data);
}
},
I dont have any issue with CORS, and everything is ok. However, when I send the GET request with an invalid argument, I get the following error:
Access to XMLHttpRequest at 'https://someDomain/delegators/someInvalidArgument/rewards' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
To overcome this, I set up a proxy with cors-anywhere on heroku and now all is well.
I have a couple of questions I'd like to ask:
- Since heroku announced they will no longer support free dynos starting end of November 2022, I'm wondering if there is another way to add: "Access-Control-Allow-Origin" : "*" to the reponse I'm getting back from the server that I have no control over?
- How is it that when I send a GET request, I dont have to set "Access-Control-Allow-Origin" : "*", but it seems like for the response I'm receiving from the external server, that header needs to be present? [Answered]
Thank you!