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 协议，这就是它可能被阻止的原因。 在这种情况下，您会在浏览器的控制台中看到相应的警告，只需检查一下即可。