I'm relatively new to AWS and was trying to secure my WIX subdomain (api.example.co.za) which is connected to AWS. So far, I have an EC2 instance for the website, as well as my S3 bucket running. I have also set up my CloudFront and pointed my subdomain on wix (api.example.co.za) to CloudFront (df***.cloudfront.net) within WIX DNS records. I got an AWS certificate through DNS verification and attached it to my CloudFront. In AWS CloudFront, I also routed all requests to my S3 bucket. I also redirected all traffic from http to https in CloudFront
When I type into my brower api.example.co.za, I am able to access my website, but insecurely, just as before. But when I type https://api.example.co.za, the website is secure, but does not load the web content. When Inspect the web content in Chrome>Inspect>Console, I see the following errors
Mixed Content: The page at 'https://api.example.co.za' zone-evergreen.js:29** was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.example.co.za/users/5e7a2'. This request has been blocked; the content must be served over HTTPS.