角度-混合内容：位于“ https错误

Question

我正在使用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))
  );
  }

我该如何解决？

Answer 1

像这样将环境文件中的apiUrl更改为https。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtLocation 5.13
import QtPositioning 5.13

Window {
    visible: true
    width: 640
    height: 480
    Map {
        anchors.fill: parent
        center: QtPositioning.coordinate(52, 22)
        plugin: Plugin {
            name: "mapboxgl"
        }
        zoomLevel: 4
        MapPolygon {
            color: "red"
            border.color: "green"
            border.width: 2
            smooth: true
            opacity: 0.25
            geoShape: poly
        }
    }
}

在此处详细了解混合内容错误-https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content