错误：混合内容，在 Github 上部署 React 应用程序时答案

【问题标题】：Error: Mixed Content, While Deploying React app on Github错误：混合内容，在 Github 上部署 React 应用程序时
【发布时间】：2020-10-07 15:39:02
【问题描述】：

我在 GitHub 页面上部署 React 应用时遇到了一个小问题。该应用程序在实时服务器上运行良好。但是，当我在 gitHub 上推送代码并对其进行测试时。出现此错误：

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

我知道这与我正在使用的 api 有关。获取请求是 omdb api and uses HTTP protocol。我尝试将 HTTP 更改为 https，尽管它可以在实时服务器上运行。 It does not on the Github page，给我和以前一样的错误。

代码：

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

【问题讨论】：

此处不接受代码图像。请参阅this Meta post 了解众多原因的列表。代码是文本，可以直接复制粘贴到您的问题中，错误消息的文本也可以。请edit您的帖子在这里提供。有关详细信息，请参阅How to Ask 和 minimal reproducible example。

标签： reactjs api omdbapi

【解决方案1】：

查看GitHub Pages 和它的源代码，我怀疑你推送到 GitHub 失败了，因为 repo 中的代码仍然指向http://www.omdbapi.com/?apikey=ad5bdfd0（最后一次更新是在 17 小时前）。我拿了a screenshot to to confirm。

将它的 URL 更改为 https:// 应该可以修复它，但如果需要，您可以使用协议相对 url（即 //）。 Really, you should be using https for everything now, even local development.

【讨论】：