前端代码直接访问http而不是https并导致混合内容错误答案

【问题标题】：Frontend code directly access http instead of https and cause mix content error前端代码直接访问http而不是https并导致混合内容错误
【发布时间】：2019-08-21 21:36:47
【问题描述】：

作为一个学术项目，我们使用 Amazon S3（适用于 Angular）和 Apache Server（适用于 Django）托管我们的 Web 应用程序。我们已将两个站点设为 https（用于前端和后端）。我们可以使用 ng serve 在本地主机上成功访问后端。但是，对于生产站点，它总是给我们一个混合内容错误（尝试为我们的后端连接 HTTP）。但我们实际上将 https 放在了我们的 Angular 代码中。对此有什么建议吗？

附上我们的前端代码

export class AuthenticationService {
  private ip: string = 'https://sunrise.99jhs.com';

  authenticate(username: string, password: string) {
    const headers = new HttpHeaders();
    headers.append('Access-Control-Allow-Origin', '*');
    return this.http.post<any>(this.ip + '/api-token-auth/', {username, password}, {headers});
  }

附上错误提示

Mixed Content: The page at 'https://sunrise.4jhs.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://sunrise.99jhs.com/api-token-auth'. This request has been blocked; the content must be served over HTTPS.

我们使用构建角度代码

ng build --prod

【问题讨论】：

标签： django angular apache amazon-s3

【解决方案1】：

尽量不要具体化协议

private ip: string = '//sunrise.99jhs.com';

【讨论】：

【解决方案2】：

问题不在于私有 IP 值。它指定了 https 协议。

问题在于这段代码：

返回 this.http.post(this.ip + '/api-token-auth/', {

该代码生成的 URL 是问题所在。如果您注意到，这是错误消息中引用的 URL。

在此处添加 https 说明符。那应该可以解决问题。

【讨论】：

请问是否有特定的方法可以将 https 请求用于 Angular？我无法在我的文件中导入 https 说明符
我不是一个有棱角的人。尝试在返回值前加上“https”。
另外，你能告诉我们返回的值吗？这是一个字符串 no？
终于解决了。与 Angular 无关。 AWS3 服务器发出 HTTPS 请求大约需要 30 分钟。非常感谢您一直跟踪我的问题