[英]Mixed Error: This request has been blocked; the content must be served over HTTPS
I have deployed my reactapp to netlify, the backend api endpoint looks like http://31.64.97.124/apiusers
the requests are working fine on localhost but when i delployed my frontend to server, on every fetch request it start giving below error.我已经将我的 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.
any solution for this problem?这个问题的任何解决方案?
Since your website is over HTTPS https://blissful-lamport-78c1f5.netlify.app/由于您的网站已结束 HTTPS https://blissful-lamport-78c1f5.netlify.app/
and API is non-HTTPS http://31.64.97.124/apiusers和 API 是非 HTTPS http://31.64.97.124/apiusers
Chrome is showing mixed content error, Means your page dosen't make all HTTPS request. Chrome 显示混合内容错误,意味着您的页面没有发出所有 HTTPS 请求。
Usually the solution is to transfer all resources to HTTPS and migrate all API's to HTTPS.通常解决方案是将所有资源转移到 HTTPS 并将所有 API 迁移到 HTTPS。
However, you can Allow insecure content by site-settings > Insecure content > Allow
But, this will load your site on your chrome only and other users visiting your site still get the same Mixed Content Error.但是,这只会在您的 chrome 上加载您的网站,并且访问您网站的其他用户仍然会遇到相同的混合内容错误。
From chrome settings allow insecure content for this site.从 chrome 设置允许此站点的不安全内容。 Root cause for the issue is http and HTTPS mixed content site is served as http and netlify with https.
问题的根本原因是 http 和 HTTPS 混合内容站点被用作 http 并使用 Z54E0571C5050AD1.netlify
From site settings look for below option从站点设置中查找以下选项
probably too late for this but creating and configuring a _redirects file in the root of your build folder(or in your public folder if using an SPA like React) might help with this.可能为时已晚,但是在构建文件夹的根目录中创建和配置 _redirects 文件(如果使用像 React 这样的 SPA,则在公共文件夹中)可能会对此有所帮助。 This should allow Chrome load content for other users' browsers too.
这也应该允许 Chrome 为其他用户的浏览器加载内容。 For your example, the _redirects file would look something like this:
对于您的示例, _redirects 文件将如下所示:
/api/* http://34.68.97.184/:splat 200
Then rather than call endpoints like this:然后而不是像这样调用端点:
fetch(`http://34.68.97.184/apiusers/login`)
You would need to make your API calls in this format:您需要以这种格式进行 API 调用:
fetch(`/api/apiusers/login`) // 'it reads /api/ because of how we configured our _redirects file'
You can read more on how to make netlify proxying here您可以在此处阅读有关如何进行 netlify 代理的更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.