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

Posted 2023-03-15

【中文标题】Angular - 混合内容：“https 错误”处的页面

【英文标题】：Angular - Mixed Content: The page at 'https Error

【发布时间】：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',
;

login.component.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))
  );
  

我该如何解决这个问题？

【参考方案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连接怎么办？