reactjs - 使用 Netlify 部署时调用 API 失败，在本地服务时工作正常（Reactjs 网站）

Question

我正在构建一个反应 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;