Cors with api in react

Question

I'm making a simple currency converter, and I can't overcome the error:

Here is a part of code:

    try {
        const { data } = await axios.get(
            'https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5',
            {
                method: 'POST',
                mode: 'no-cors',
                headers: {
                    Accept: 'application/json',
                    WithCredentials: true,
                    'Access-Control-Allow-Origin': 'http://localhost:3000/',
                    'Content-Type': 'application/json; charset=UTF-8',
                    'Access-Control-Allow-Methods': 'OPTIONS,GET,POST,PUT,DELETE',
                    'Access-Control-Allow-Headers':
                        'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
                    Authorization: '',
                },
                withCredentials: true,
                credentials: 'same-origin',
            }
        )
        data.push({ ccy: 'UAH', buy: '1', sale: '1' })
        data.splice(2, 1)
        return data
    } catch (error) {
        alert(error)
    }
}

Help please :)

tried many solutions from google but to no avail...

score -2 · Accepted Answer · answered Dec 01 '22 at 14:39

The problem can be solved by using proxies

The proxy I have used in this example is allOrigins which is a free and opensource proxy

Using Axios, (You can change url with whatevery url you want)

  try {
          const url = "https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5";
          const { data } = await axios.get(
            `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`
          );
          data.push({ ccy: "UAH", buy: "1", sale: "1" });
          data.splice(2, 1);
          return data;
        } catch (error) {
          alert(error);
        }

Using Fetch api, (You can change url with whatevery url you want)

 try {
          const url = "https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5";
          const data = await fetch(
            `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`
          )
            .then((response) => response.json())
            .then((data) => data);
          data.push({ ccy: "UAH", buy: "1", sale: "1" });
          data.splice(2, 1);
          return data;
        } catch (error) {
          alert(error);
        }

Cors with api in react

1 Answers1