How do I make remote call from localhost with NodeJS - node.js

Question

I have a local NodeJS app that uses Axios to connect to a local server and now I am trying to hit the deployed server. The call looks like:
let apiCall = "https://api.myproduct.io/api/all";
console.log("making axios call to " + apiCall);
const resp = await axios
.get(
apiCall,
{
headers: {
APIKey: config.API_KEY,
'Access-Control-Allow-Origin': '*'
},
},
{ crossdomain: true, credentials: "same-origin" }
)
.then((response) => {
console.log("axios response " + response);
return response;
})
.catch((e) => {
return e;
});
return resp;
}
And I have this in my vue.config.js:
module.exports = {
devServer: {
proxy: "https://api.myproduct.io",
},
transpileDependencies: ["vuetify"],
};
However, when I deploy this to AWS and try to GET it via Axios I get:
making axios call to https://api.myproduct.io/api/all
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at https://api.myproduct.io/api/all. (Reason:
CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.
These calls work from Postman and my mobile app - it's only from my local environment that this fails.

Answer 1

If I'm following correctly, you have deployed a website hosted at domain x.y and are trying to call an API at api.myproduct.io? If that's the case, the CORS headers that api.myproduct.io are responding with are what's causing the issue. You should either change the CORS headers in api.myproduct.io if you have control over that service. Or use a proxy of sorts to call it from a server you do control that can be registered to the same domain.
In short:
x.y calls to api.myproduct.io ❌
x.y calls to x.y/products ✅ (then service that handles /products calls api.myproducts.io)
You can learn more about CORS here
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS