0

I am trying to create a component in ReactJS that converts the money in my website from USD to other currencies. I am trying to use an axios call to third party API, ipapi.co, that gives me the client's IP address and their country code and currency.

I'm getting CORS error in the browser:

Access to XMLHttpRequest at 'https://ipapi.co/json' from origin 'mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I can't apply server side proxy because I need the location of my client's computer for the feature to work completely.

Can you help me remove this error?

My code:

export const geoData =()=>{
  return axios.get('https://ipapi.co/json/');
}
Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
  • Does this answer your question? [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – zero298 Dec 28 '20 at 21:29

1 Answers1

1

For that API it is not possible to call it from web app. It can only be done by server call and return to you.

I found another way to do this. This API works:

fetch('https://api.ipdata.co?api-key=test').then((data) => {
  data.json().then((parsed) => {
    console.log(parsed);
  });
});

Here is API documentation: https://docs.ipdata.co/

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
  • That defeats the whole point of the API, it's designed to be a simple API that can be queried from anywhere, including the frontend. – Luke Brown Feb 19 '22 at 14:58
  • You're referencing another API ipdata.co, not ipapi.com which the OP asked about – Luke Brown Feb 19 '22 at 14:59
  • 1
    On the first point, you are right. It should be simple to use. But they are preventing any EP calls from web app, they just blocked it and you can only do it with server-to-server API call. The second point is that i gave an alternative API for checking someone's IP address. It is not the same one. – Mario Petrovic Feb 19 '22 at 19:32