As an academic project, we host our web application with Amazon S3 (For Angular) and Apache Server (For Django). We have made both sites https (for both frontend and backend). We can access the backend successfully on our localhost using ng serve. However, for the production site, it always gives us a mixed content error (try to connect HTTP for our backend). But we actually put https in our angular code. Are there any suggestions on that?
Attached is our frontend code
export class AuthenticationService {
private ip: string = 'https://sunrise.99jhs.com';
authenticate(username: string, password: string) {
const headers = new HttpHeaders();
headers.append('Access-Control-Allow-Origin', '*');
return this.http.post<any>(this.ip + '/api-token-auth/', {username, password}, {headers});
}
Attached is error message
Mixed Content: The page at 'https://sunrise.4jhs.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://sunrise.99jhs.com/api-token-auth'. This request has been blocked; the content must be served over HTTPS.
We build the angular code using
ng build --prod
2
Answers
Try not to specificity the protocol at all
The problem is not with the private IP value. It specifies the https protocol.
The problem is with this code:
The URL resulting from that code is the problem. If you notice, this is the URL being referenced in the error message.
Add an https specifier there. That should resolve the issue.