Calling an API fails when deployed with Netlify, works fine when served locally (Reactjs website)

Question

I am building a react js website where I have to call a currency converter API. Calling that API works perfectly when served locally (on localhost), but once I deploy it to Netlify, it fails from working.

ConvertCurrency = async (from, to, amount) => {
        let endpoint = 'xxxxxx';
        let access_key = "xxxxxxxxxxxx"; 

        const url = 'http://data.fixer.io/api/' + endpoint + '?access_key=' + access_key + '&from=' + from + '&to=' + to + '&amount=' + amount;

        try {
            const res = await Axios.get(url)
            const rate = Math.round(((res.data.info.rate* 100) / 100)).toFixed(2)
            return rate;
        } catch (err) {
            console.log(err)
        }
        return -1;
    }

This is the error that I am catching(in the try{}catch(){} exception).

Error: Network Error
    at e.exports (createError.js:17)
    at XMLHttpRequest.p.onerror (xhr.js:83)

Any help is appreciated.

Thanks

If you can share the error you run in to then it would be easy to troubleshoot. No errors in the console log? — Christie, Nov 15 '20 at 02:09
Yes, this is a kind of error that I am getting. ```Error: Network Error at e.exports (createError.js:17) at XMLHttpRequest.p.onerror (xhr.js:83) ``` — Byusa, Nov 15 '20 at 02:44

score 0 · Accepted Answer · answered Nov 15 '20 at 05:10

I found the error!

Solution:

The problem was using HTTP instead of HTTPS. This is because for APIs to serve your requests in production you need to provide a secured URL.

const url = 'https://data.fixer.io/api/' + endpoint + '?access_key=' + access_key + '&from=' + from + '&to=' + to + '&amount=' + amount;

Calling an API fails when deployed with Netlify, works fine when served locally (Reactjs website)

1 Answers1