[SOLVED] Error: Mixed Content, While Deploying React app on Github

Error: Mixed Content, While Deploying React app on Github

I ran into a small problem while deploying a react app on GitHub pages. The app works perfectly fine on a live server. But, when I push the code on gitHub and test it. This error occurs:

Mixed Content: the page at '<domain>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoing 'http://www.omdbapi.com/...' ...

I know it has something to do with the api I m using. It's omdb api and uses HTTP protocol for a get request. I tried changing the HTTP to https and though it works on the live server. It does not on the Github page, giving me the same error as before.

Code:

const apirul = 'http://www.omdbapi.com/?apikey=...';
// ...
Axios(apiurl + "&=s="+state.s)
.then(data => {
  console.log(data);
  let results = data.Search;
  setState(prevState => {
    return { ...prevState, results }
  })
})
.catch(e => {
  console.log(e)
})
// ...

Solution

Looking at the GitHub Pages and the source it's got, I suspect your push to GitHub failed as the code in the repo is still pointing to http://www.omdbapi.com/?apikey=ad5bdfd0 (and was last updated 17 hours ago). I took a screenshot to to confirm.

Changing it the URL to https:// should fix it, though you could use a protocol relative url (that is, //) if you had to. Really, you should be using https for everything now, even local development.