混合内容与 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

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

错误是由于尝试从安全的 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 。

希望这可以帮助。

Answer 2

你可以去：

'//myserverapp.herokuapp.com/'

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

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