API 在 localhost 中運行，但在部署時沒有

Question

這是用 React 編寫的，我不熟悉使用狀態和一般反應，我使用的 API 在我的本地主機上工作，但當我使用 GitHub 部署它時卻沒有。 GitHub 進行了所有更改，但仍然沒有加載。 幫助？

const joke_api = "http://api.icndb.com/jokes/random?firstName=Aaryaman&lastName=Rattan";

const Dad = () => {
    const [joke, setJoke] = useState('');
    const generate = ()=>{
        fetch(joke_api)
    .then(response => response.json())
    .then(data => setJoke(data.value.joke))
    }
    useEffect(() =>{
        generate();
    }, [])
    
    
    return (
        <section>
         <div className="container portfolio__container">
             <h5 id= 'sec'>Stressed?</h5>
               <h2 id = "sec2">Generate a random joke.</h2>

            <article className= "portfolio__item">
             <div>
             <p >{joke}</p>
             <div className="portfolio__item-cta">
             <button className="btn btn-primary" onClick= {generate}> <h2>More? More.</h2></button>
             {/* <a href= "" className= "btn btn-primary"  onClick= {generate}>More? More.</a> */}
             </div>
            </div> 
            </article>
             </div>
             </section>
    )
}

export default Dad```

Answer 1

不知道您如何部署它，但我懷疑那是因為瀏覽器的安全性。 你說的是 GitHub，所以如果它托管在那里——它應該在一些 https 主機上可用。 通常，瀏覽器不允許您從 https 頁面獲取任何非 https 主機 - 而您的代碼中的 url 具有 http 協議，這就是它可能被阻止的原因。 在這種情況下，您會在瀏覽器的控制台中看到相應的警告，只需檢查一下即可。