Question posted in
Some documentation to get you started can be found here.

Frontend code directly access http instead of https and cause mix content error – Apache

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
Tags:

2

Answers


  1. 0

    Try not to specificity the protocol at all

    private ip: string = '//sunrise.99jhs.com';
    Login or Signup to reply.
  2. 0

    The problem is not with the private IP value. It specifies the https protocol.

    The problem is with this code:

    return this.http.post(this.ip + ‘/api-token-auth/’, {

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search