reactjs - 混合内容与 heroku 服务器

Question

具有此客户端配置(基于 react )

export const config = {
  API_URL: process.env.NODE_ENV === 'production' ? 'https://myserverapp.herokuapp.com/' : 'http://mywebapp/'
}

将它部署到服务器(一些共享托管服务器)并将请求发送到我的后端服务器(基于 heroku 服务器的 lumen)时，我收到此错误 -

Mixed Content: The page at 'https://mywebapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://myserverapp.herokuapp.com/items'. This request has been blocked; the content must be served over HTTPS.

• 一开始，该应用程序是由 Angular 构建的，并且一切正常!现在，当切换到 React 时会发生此错误。

发生了什么事？我该如何解决？

Answer 1

为陷入此问题的 future 用户删除此评论

错误是由于尝试从安全的 URL“HTTPS”加载不安全的脚本“HTTP”造成的

修复 1

解决此问题的一种方法是访问网站的不安全版本(即)http://whatever.herokuapp.com但这不是一个很好的解决方案，因为您的观众不知道是什么问题导致我们进行修复 2

修复 2

获取 URL 以确定实例正在使用的协议(protocol)在 PHP 中，我使用这行代码做到了这一点

if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on'){ $protocol = "https://".$_SERVER['HTTP_HOST']; } else{ $protocol='http://'.$_SERVER['HTTP_HOST']; }

然后将协议(protocol)附加到您从网站导入的内容中

如果导入来自外部网站，只需将 script 标签或 style 标签中的 http 替换为 https。

希望这对您有所帮助。