Angular-混合内容：https错误页面

Question

我正在开发一款带有Angular 7（前端）和Laravel（后端）的应用程序。我在《邮递员》中测试了这个endpoint，它是有效的。当我尝试登录应用程序时，我遇到了这个错误。

混合内容：页面位于'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',
};

登录。组成部分ts

  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))
  );
  }

我该如何解决这个问题？

Answer 1

将环境文件中的apiUrl更改为https，如下所示。

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

阅读更多关于混合内容错误这里-https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content