title: Angular 5 Mixed Blocked Content
body: <p>I have deployed an Angular 5 application to Heroku <strong>(HTTPS site)</strong> that retrieves json data <strong>(HTTP request endpoint)</strong> from a third party. </p>
  
  <p>I get the following Mixed Content blocked error:</p>
  
  <p><a href="https://i.stack.imgur.com/nefKS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nefKS.png" alt="ERROR"></a> </p>
  
  <p>NOTE: The HTTP request endpoint can't be changed to HTTPS.</p>
  
  <p>This is my call to the request endpoint:</p>
  
  <pre><code>constructor(private http: HttpClient) { }
  
  private httpOptions = {
  headers: new HttpHeaders({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers':  'Content-Type',
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Content-Type':  'application/json'
  })
  
  
  };
    this.http.get&lt;Skater[]&gt;(this.skaterServiceUrl, this.httpOptions);
  </code></pre>
  
  <p>How can I make the request from an <strong>HTTPS</strong> site to a <strong>HTTP</strong> request endpoint?</p>
  
  <p>All help will be greatly appreciated. Thank you for your time.</p>