Error: Mixed Content, While Deploying React app on Github

Question

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)
})
// ...

Images of code are not acceptable here. See [this Meta post](https://meta.stackoverflow.com/a/285557/62576) for a list of the many reasons why. Code is text, and can be copied and pasted directly into your question, as can the text of error messages. Please [edit] your post to provide that here. For more information, see [ask] and [mre]. — Ken White, Jun 17 '20 at 18:16

score 2 · Accepted Answer · answered Jun 17 '20 at 20:59

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.

Error: Mixed Content, While Deploying React app on Github

1 Answers1