使用 api 反应应用程序返回 - 混合内容：<> 处的页面已通过 HTTPS 加载，但请求了不安全的资源

Question

I deployed a React App, through Heroku, that uses the API at https://exchangeratesapi.io/ to convert currency. When I deploy to via Heroku, the error message in the HTML is "Error: Failed to fetch" and the Error itself is:

CurrencyUI.js:31 Mixed Content: The page at 'https://arcane-forest-12888.herokuapp.com/currency' was loaded over HTTPS, but requested an insecure resource 'http://api.exchangeratesapi.io/latest?access_key=dff081b889aae502999e19f12aab42e5&symbols=USD,ZAR,GBP,EUR'. This request has been blocked; the content must be served over HTTPS.

I tried implementing https://stackoverflow.com/a/67765239/13848021

//there's no way to disable mixed content using javascript but you can add this tag

< meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

//to your HTML to allow mixed content

But then it returns an undefined object. The API documentation makes it seem like I can simply change my BASE_URL to from http to https but this also returns an undefined object.

Here is my code:

import React, { useState, useEffect } from 'react'

import CurrencyInput from './CurrencyInput'


const BASE_URL = `http://api.exchangeratesapi.io/latest?access_key=dff081b889aae502999e19f12aab42e5&symbols=USD,ZAR,GBP,EUR`

const CurrencyUI = () => {
     
    const [error, setError] = useState(null)
    const [isLoaded, setIsLoaded] = useState(false)
    const [currencies, setCurrencies] = useState([])
    
    const [usdCurrency, setUsdCurrency] = useState()
    const [zarCurrency, setZarCurrency] = useState()
    const [gbpCurrency, setGbpCurrency] = useState()
    const [eurCurrency, setEurCurrency] = useState()
    
    const [amount, setAmount] = useState()
    
    const [inAmount, setInAmount] = useState(true)
    const [zarExRate, setZarExRate] = useState(false)
    const [gbpExRate, setGbpExRate] = useState(false)
    const [eurExRate, setEurExRate] = useState(false)

    useEffect(() => {
        fetch(BASE_URL)
            .then(res => res.json())
            .then(data => {
                const currencyUSD = Object.keys(data.rates)[0]
                const currencyZAR = Object.keys(data.rates)[1]
                const currencyGBP = Object.keys(data.rates)[2]
                const currencyEUR = Object.keys(data.rates)[3]
                setIsLoaded(true)
                setCurrencies([...Object.keys(data.rates)])
                setUsdCurrency(data.rates[currencyUSD])
                setZarCurrency(data.rates[currencyZAR])
                setGbpCurrency(data.rates[currencyGBP])
                setEurCurrency(data.rates[currencyEUR])
            })
           
            .catch(error => {
                setIsLoaded(true)
                setError(error)
            })
    }, [])    
   
    function handleFromAmountChange(e) {
        setAmount(e.target.value)
        setInAmount(true)
        setZarExRate(false)
        setGbpExRate(false)
        setEurExRate(false)
    }

    function handleZarAmountChange(e) {
        setAmount(e.target.value)
        setInAmount(false)
        setZarExRate(true)
        setGbpExRate(false)
        setEurExRate(false)
    }

    function handleGbpAmountChange(e) {
        setAmount(e.target.value)
        setInAmount(false)
        setZarExRate(false)
        setGbpExRate(true)
        setEurExRate(false)
    }

    function handleEurAmountChange(e) {
        setAmount(e.target.value)
        setInAmount(false)
        setZarExRate(false)
        setGbpExRate(false)
        setEurExRate(true)
    }

    if (inAmount) {
        fromAmount = amount
        zarAmount = ((amount / usdCurrency) * zarCurrency).toFixed(3)
        gbpAmount = ((amount / usdCurrency) * gbpCurrency).toFixed(3)
        eurAmount = ((amount / usdCurrency) * eurCurrency).toFixed(3)
    } else if (zarExRate) {
        zarAmount = amount
        fromAmount = ((amount * usdCurrency) / zarCurrency).toFixed(3)
        gbpAmount = ((amount * gbpCurrency) / zarCurrency).toFixed(3)
        eurAmount = ((amount * eurCurrency) / zarCurrency).toFixed(3)
    } else if (gbpExRate) {
        gbpAmount = amount
        fromAmount = ((amount * usdCurrency) / gbpCurrency).toFixed(3)
        zarAmount = ((amount * zarCurrency) / gbpCurrency).toFixed(3)
        eurAmount = ((amount * eurCurrency) / gbpCurrency).toFixed(3)
    } else if (eurExRate) {
        eurAmount = amount
        fromAmount = ((amount * usdCurrency) / eurCurrency).toFixed(3)
        gbpAmount = ((amount * gbpCurrency) / eurCurrency).toFixed(3)
        zarAmount = ((amount * zarCurrency) / eurCurrency).toFixed(3)
    }    
    
    if (error) {
        return <div className="error">Error: {error.message}</div>
    } else if (!isLoaded) {
        return (
            <div>
                <h1>Loading...</h1>
            </div>
        )
    } else {
        
        return (
            
            <div className="currency-ui">
               
                <CurrencyInput
                    key={usdCurrency}
                    id={usdCurrency}
                    value={fromAmount}
                    onChangeAmount={handleFromAmountChange}
                    placeholder={currencies[0]}
                />
                <CurrencyInput
                    key={zarCurrency}
                    id={zarCurrency}
                    value={zarAmount}
                    onChangeAmount={handleZarAmountChange}
                    placeholder={currencies[1]}
                />
                <CurrencyInput
                    key={gbpCurrency}
                    id={gbpCurrency}
                    value={gbpAmount}
                    onChangeAmount={handleGbpAmountChange}
                    placeholder={currencies[2]}
                />
                <CurrencyInput
                    key={eurCurrency}
                    id={eurCurrency}
                    value={eurAmount}
                    onChangeAmount={handleEurAmountChange}
                    placeholder={currencies[3]}
                />
            </div>
        )
    }
}

export default CurrencyUI

None of the solutions I on here I have implemented solves my problem. Any ideas on what I can try?

Answer 1

Try to change const BASE_URL = http://api.exchangeratesapi.io/latest?access_key=dff081b889aae502999e19f12aab42e5&symbols=USD,ZAR,GBP,EUR

To:

const BASE_URL = https://api.exchangeratesapi.io/latest?access_key=dff081b889aae502999e19f12aab42e5&symbols=USD,ZAR,GBP,EUR

if BASE_URL gives you the same response it will work.

Answer 2

I had the same issue, I did change my api to https but unfortunately it is failing as it won't let me fetch data through https