I encountered the following issue:
While using my Angular service to retrieve data from a PHP script, the browser or Angular itself switches from HTTPS to HTTP. Since my site is loaded over HTTPS with HSTS, the AJAX request gets blocked as mixed content.
Below is the code snippet for my AJAX service:
import { Injectable, } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class AjaxService {
private apiUrl: string = "https://example.com/myapi/myscript";
/**
* @param {Http} http HTTPService
*/
constructor(private http: Http) { }
/**
* @param {string} piece
*/
public getAllComponents(piece: string) {
console.debug("Get Components for Query: " + piece);
return this.http.get(this.apiUrl + "?compontent=" + piece).map((res: Response) => res.json());
}
[...]
}
When I load my page from the main page
https://example.com/Angular2Applicationhttp://example.com/myapi/myscript