API 在 localhost 中运行，但在部署时没有

Question

This was written in React, I am new to using states and react in general and the API I used is working on my local host but not when I deploy it with GitHub. The GitHub has all the changes and it isn't loading, still. Help?

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

Don't know how exactly you deploy it, but I suspect, that that's because a browser's security. You say about GitHub, so if it's hosted there – it should be available on some https-host. Normally, a browser will not allow you to fetch any non-https hosts from a https-page – and a url in your code has http-protocol, that's why it may be blocked. In such case you'll see a corresponding warning in a browser's console, just check it.