CODEWITHSUNDEEP
javascriptreactjscors
Ansab Gillani
Ansab Gillani

Reputation: 27

CORS issue in ReactJS

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

Upvotes: 1

Views: 1251

Answers (1)

Mario Petrovic
Mario Petrovic

Reputation: 8332

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/

Upvotes: 1

Related Questions