调用API在与Netlify一起部署时失败，在本地服务时工作正常(Reactjs网站)

Question

我正在构建一个react js网站，在那里我必须调用货币转换器API。当在本地(本地主机上(提供服务时，调用API非常有效，但一旦我将其部署到Netlify，它就无法工作。

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;
}

这是我正在捕获的错误(在try｛｝catch((｛｝｝异常中(。

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

感谢您的帮助。

感谢

Answer 1

我发现了错误！

解决方案：

问题是使用HTTP而不是HTTPS。这是因为要让API在生产中为您的请求提供服务，您需要提供一个安全的URL。

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