title: Angular - Mixed Content: The page at 'https Error
body: <p>I am developing an App with Angular 7 (frontend) and Laravel (backend). I test the endpoint in POSTMAN, and it works. When I tried to Login to the application, I got this error.</p>
  
  <blockquote>
    <p>Mixed Content: The page at '<a href="https://sandbox.cloudinteractiveplatforms.com/login" rel="nofollow noreferrer">https://sandbox.cloudinteractiveplatforms.com/login</a>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<a href="http://sandboxbackend.cloudinteractiveplatforms.com/api/login" rel="nofollow noreferrer">http://sandboxbackend.cloudinteractiveplatforms.com/api/login</a>'. This request has been blocked; the content must be served over HTTPS.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/PT1kj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PT1kj.png" alt="mixed_error"></a></p>
  
  <p>Environment</p>
  
  <pre><code>export const environment = {
   production: true,
   apiUrl:   'http://sandboxbackend.cloudinteractiveplatforms.com/api',
  };
  </code></pre>
  
  <p>login.component.ts</p>
  
  <pre><code>  onLogin(user: User): Observable&lt;User&gt; {
  
  const request = JSON.stringify(
    { email: user.email, password: user.password }
  );
  
  return this.http.post(this.loginUrl, request, httpOptions)
    .pipe(
      map((response: User) =&gt; {
        // 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 =&gt; this.handleError(error))
    );
    }
  </code></pre>
  
  <p>How do I resolve this?</p>