Angular 5 混合阻止内容答案

【问题标题】：Angular 5 Mixed Blocked ContentAngular 5 混合阻止内容
【发布时间】：2018-10-12 15:07:40
【问题描述】：

我已将 Angular 5 应用程序部署到 Heroku （HTTPS 站点），该应用程序从第三方检索 json 数据 （HTTP 请求端点）。

我收到以下混合内容阻止错误：

注意：HTTP 请求端点不能更改为 HTTPS。

这是我对请求端点的调用：

constructor(private http: HttpClient) { }

private httpOptions = {
headers: new HttpHeaders({
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers':  'Content-Type',
  'Access-Control-Allow-Methods': 'GET, OPTIONS',
  'Content-Type':  'application/json'
})


};
  this.http.get<Skater[]>(this.skaterServiceUrl, this.httpOptions);

如何从 HTTPS 站点向 HTTP 请求端点发出请求？

我们将不胜感激所有帮助。感谢您的宝贵时间。

【问题讨论】：

试试添加这个。
@LakshmiPrasanna 感谢您的回复。根据您的建议，我添加了以下内容：。不幸的是，这对我不起作用。关于如何解决的任何其他想法？

标签： angular heroku xmlhttprequest angular5 angular-httpclient

【解决方案1】：

我认为您不会找到一种方便的方式来向广泛的用户/浏览器提供混合内容。我认为imgs 和其他标签会显示，但 xmlHttpRequest 调用不会。

Chrome 中曾经有一个盾牌图标，您可以点击它来显示混合内容 - 请参阅 How to get Chrome to allow mixed content?。那里也有关于配置 Chrome 以显示混合内容的答案，但这不是您希望每个用户都做的事情。

我建议您通过这个 Heroku 服务器简单地代理请求。不确定您在服务器上运行的是什么语言，但您可以直接获取 /some-path，然后在该路径上运行一个函数来执行 HTTP 请求吗？我以前做过这个，发现它非常有用。

【讨论】：