After working on a client side application built with angular (with SSL enabled), I encountered a mixed content error due to my server lacking SSL encryption. Despite searching for solutions online, I couldn't find any that addressed this issue effectively. Below is the relevant information:
Component function :
onSubmit(form:NgForm) {
this.subscription = this._validation.validation({
cell_no: form.value.cell_no, pass: form.value.password,
username: this._common.getConnData().username, password:this._common.getConnData().password
})
.subscribe(res => {
if(typeof res == 'string') // invalid access attempt
{
this.invalid_access = true;
}
else // login successful
{
console.log(res);
}
})
}
Service function :
validation(data:{})
{
const body = JSON.stringify(data);
const headers = new Headers();
headers.append('Content-Type', 'application/json');
return this._http.post(this._common.getBaseUrl()+"doctor_panel_api/validation_modified/format/json",
body, {headers: headers})
.map(res => res.json());
}
Upon clicking the login button, I received the following errors: https://i.sstatic.net/nNB9b.png
The app works perfectly when connected to the server from localhost. Thank you in advance.