External Api Issue In Production - React.js

I build an app rendering data from an external API. In development mode everything works fine but in production the API doesn't load. It does't return anything not error in console

Solution 1:

You should check the network tab in the console and see which response code that request is returning. The catch block will only be hit if the response code of that request is one of these client errors listed on this website: https://httpstatuses.com/

Solution 2:

Full code here

Note In development mode.

My signup form work fine, login work fine But in production none of this work! I have google during for one week but dont find answer.

importReact, {useState, useEffect} from'react';
import axios from'axios';
importShowCasefrom'./utils/table.github.user';
importValidatorfrom"../mm-admin/auth/auth.validator"constHomepage = () => {

const [organisations, setOrgnisations] = useState([])

const [searchContributor, setSearchContributor] = useState('');
const [searchContributorResult, setSearchContributorResult] = useState([]);

const [isAdded, setAdded] = useState(false);

useEffect(() => {
    let cleanup = false;
    requestApi()
    return() => {
        cleanup = true;
    }

}, [searchContributor])

constrequestApi = () =>{
    axios.get("https://api.github.com/repos/git/git/contributors", {
        params : {
            rejectUnauthorized: false,//add when working with https sitesrequestCert: false,//add when working with https sitesagent: false,//add when working with https sites
        }
    })
    .then(response => {
        const all = response.data;
        const result = all.filter(contributor => {
            return contributor.login.toLowerCase().includes(searchContributor.toLowerCase())
        })
        setSearchContributorResult(result)
    })
    .catch(error =>console.log(error))
    axios.get("https://api.github.com/organizations",  {
        params : {
            rejectUnauthorized: false,//add when working with https sitesrequestCert: false,//add when working with https sitesagent: false,//add when working with https sites
        }
    })
    .then(response => {
        const all = response.data;
        const result = all.filter(contributor => {
            return contributor.login.toLowerCase().includes(searchContributor.toLowerCase())
        })
        setOrgnisations(result)
    })
    .catch(error =>console.log(error))
}
constmakeSearchContr = event => {
    event.preventDefault()
    setSearchContributor(event.target.value)
}
constaddFavorite = (favorite, notes) => event => {
    event.preventDefault();
    if (Validator.isAuthenticated()) {
        const id = Validator.isAuthenticated().user._id;
        const favorites = {
            item : JSON.stringify(favorite),
            note : notes
        }
        axios.put("/user/action/" + id, favorites)
        .then(res => {
            setAdded(true)
            const timer = setTimeout(() => {
                setAdded(false)
            }, 4000)
           return() =>clearTimeout(timer)
        })
        .catch(error =>console.log(error))
    } else {
        console.log("Need to loged")
    }
}
constcontributorGit = () => {
    return searchContributorResult.map((contributor, index) => {
        return<ShowCasekey={index}item={contributor}status={isAdded}favorite={addFavorite}/>
    })
}
constorganisationsGit = () => {
    return organisations.map((organisation, index) => {
        return<ShowCasekey={index}item={organisation}favorite={addFavorite}/>
    })
}
return (
    <article><divclassName=""><divclassName="container"><form><divclassName=""></div><divclassName="form-group"><inputtype="text"className="form-control"placeholder="Search"value={searchContributor}onChange={makeSearchContr}/></div></form></div></div><divclassName="github-user"id="github"><divclassName="container"><h2>List contributor :</h2><ulstyle={{paddingLeft: '0px'}}>
                    {contributorGit()}
                </ul><h2>List organisation :</h2><ulstyle={{paddingLeft: '0px'}}>
                    {organisationsGit()}
                </ul></div></div></article>
)
}
exportdefaultHomepage;