与Heroku服务器混合的内容

Question

具有此客户端配置（基于反应）

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

在将其部署到服务器（某些共享的托管服务器）并将请求发送到我的后端服务器（基于heroku服务器的流明）时，出现此错误-

  

混合内容：“ https://mywebapp.com/”上的页面为   通过HTTPS加载，但请求了不安全的XMLHttpRequest端点   'http://myserverapp.herokuapp.com/items'。该请求已被阻止；   内容必须通过HTTPS提供。

• 一开始，该应用是由Angular构建的，并且运行良好！现在，当做出反应时，会发生此错误。

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

Answer 1

您可以参加：

'//myserverapp.herokuapp.com/'

如果您确实想编写协议并且仍然避免混合内容，请使用：

location.protocol + '//myserverapp.herokuapp.com/'

Answer 2

为以后遇到此问题的用户删除此评论

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

修复1

解决此问题的一种方法是访问网站的不安全版本（例如http://whatever.herokuapp.com），但这不是一个好的解决方法，因为您的观众不会知道问题所在，这使我们修复2

修复2

获取URL来确定实例正在使用的协议 在PHP中，我是使用以下代码行完成的

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

，然后将该协议附加到您从网站导入的内容中

如果导入是从外部网站进行的，只需将script标记或style标记中的http替换为https。

希望这会有所帮助。