CORS issue in ReactJS

Question

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/');
}

Does this answer your question? How does Access-Control-Allow-Origin header work? — zero298
– zero298, Commented Dec 28, 2020 at 21:29

Mario Petrovic · Accepted Answer · 2020-12-28 16:17:20Z

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/

answered Dec 28, 2020 at 16:17

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luke Brown Over a year ago

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 Over a year ago

You're referencing another API ipdata.co, not ipapi.com which the OP asked about

Mario Petrovic Over a year ago

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.

Collectives™ on Stack Overflow

CORS issue in ReactJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related