Angular 5 Mixed Blocked Content

Question

I have deployed an Angular 5 application to Heroku (HTTPS site) that retrieves json data (HTTP request endpoint) from a third party.

I get the following Mixed Content blocked error:

NOTE: The HTTP request endpoint can't be changed to HTTPS.

This is my call to the request endpoint:

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<Skater[]>(this.skaterServiceUrl, this.httpOptions);

How can I make the request from an HTTPS site to a HTTP request endpoint?

All help will be greatly appreciated. Thank you for your time.

@LakshmiPrasanna thanks for the response. I added the following per your suggestion: . Unfortunately, this did not work for me. Any other ideas on how to resolve? — Rich Blumer, May 02 '18 at 16:17

score 2 · Answer 1 · answered May 02 '18 at 18:50

I don't think you'll find a convenient way to serve up mixed content to a broad array of users/browsers. I think imgs and other tags will display, but xmlHttpRequest calls will not.

There used to be a shield icon in Chrome that you could click to display mixed content – see How to get Chrome to allow mixed content?. There are also answers there about configuring Chrome to display mixed content, but that's not something you'd expect each user to do.

I'd recommend you simply proxy the request via this Heroku server. Not sure what language you're running on the server, but can you just GET /some-path and then have a function run at that path that performs the HTTP request? I've done this before and found it very useful.

Angular 5 Mixed Blocked Content

1 Answers1