混合错误：此请求已被阻止； 内容必须通过 HTTPS 提供

Question

我已经将我的 reactapp 部署到 netlify，后端 api 端点看起来像http://31.64.97.124/apiusers请求在本地主机上工作正常但是当我将前端部署到服务器时，它开始给出以下错误。

Mixed Content: The page at 'https://blissful-lamport-78c1f5.netlify.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://34.68.97.184/apiusers/login'. This request has been blocked; the content must be served over HTTPS.

这个问题的任何解决方案？

Answer 1

由于您的网站已结束 HTTPS https://blissful-lamport-78c1f5.netlify.app/

和 API 是非 HTTPS http://31.64.97.124/apiusers

Chrome 显示混合内容错误，意味着您的页面没有发出所有 HTTPS 请求。

通常解决方案是将所有资源转移到 HTTPS 并将所有 API 迁移到 HTTPS。

However, you can Allow insecure content by site-settings > Insecure content > Allow

但是，这只会在您的 chrome 上加载您的网站，并且访问您网站的其他用户仍然会遇到相同的混合内容错误。

Answer 2

从 chrome 设置允许此站点的不安全内容。 问题的根本原因是 http 和 HTTPS 混合内容站点被用作 http 并使用 Z54E0571C5050AD1.netlify

从站点设置中查找以下选项

Answer 3

可能为时已晚，但是在构建文件夹的根目录中创建和配置 _redirects 文件（如果使用像 React 这样的 SPA，则在公共文件夹中）可能会对此有所帮助。 这也应该允许 Chrome 为其他用户的浏览器加载内容。 对于您的示例， _redirects 文件将如下所示：

/api/* http://34.68.97.184/:splat 200

然后而不是像这样调用端点：

fetch(`http://34.68.97.184/apiusers/login`)

您需要以这种格式进行 API 调用：

fetch(`/api/apiusers/login`) // 'it reads /api/ because of how we configured our _redirects file'

您可以在此处阅读有关如何进行 netlify 代理的更多信息