Angular - 混合内容：“https 错误”处的页面答案

【问题标题】：Angular - Mixed Content: The page at 'https ErrorAngular - 混合内容：“https 错误”处的页面
【发布时间】：2019-11-25 01:40:09
【问题描述】：

我正在使用 Angular 7（前端）和 Laravel（后端）开发应用程序。我在 POSTMAN 中测试了端点，它可以工作。当我尝试登录应用程序时，出现此错误。

混合内容：“https://sandbox.cloudinteractiveplatforms.com/login”处的页面通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点“http://sandboxbackend.cloudinteractiveplatforms.com/api/login”。此请求已被阻止；内容必须通过 HTTPS 提供。

环境

export const environment = {
 production: true,
 apiUrl:   'http://sandboxbackend.cloudinteractiveplatforms.com/api',
};

  onLogin(user: User): Observable<User> {

const request = JSON.stringify(
  { email: user.email, password: user.password }
);

return this.http.post(this.loginUrl, request, httpOptions)
  .pipe(
    map((response: User) => {
      // Receive jwt token in the response
      const token: string = response['access_token'];
      // If we have a token, proceed
      if (token) {
        this.setToken(token);
        this.getUser().subscribe();
      }
      return response;
    }),
    catchError(error => this.handleError(error))
  );
  }

我该如何解决这个问题？

【问题讨论】：

标签： angular laravel

【解决方案1】：

把环境文件中的apiUrl改成https这样。

apiUrl:   'https://sandboxbackend.cloudinteractiveplatforms.com/api',

在此处阅读有关 混合内容 错误的更多信息-https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content

【讨论】：

如果API不提供https连接怎么办？