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

Question

我已经将我的 reactapp 部署到 netlify，后端 api 端点看起来http://31.64.97.124/apiusers请求在 localhost 上运行良好，但是当我将前端部署到服务器时，在每个 fetch 请求上它开始给出以下错误。

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.

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

标签： javascriptreactjsreduxaxiosfetch

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 上加载您的网站，并且访问您网站的其他用户仍然会遇到相同的混合内容错误。