How to allow HTTPS on Elastic Beanstalk application

Question

I have deployed my React Frontend/Client using AWS Amplify. Which is automatically adding SSL to teh production branch URL

and my Backend/API was deployed using AWS ElasticBeans

Now the problem is, I am unable to make any API/HTTP request to my server from client because of the error,

Mixed Content: The page at 'My HTTPS Ampify URL here' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'My HTTP Beanstalk here’. This request has been blocked; the content must be served over HTTPS.

How can I configure AWS Beanstalk to be HTTPS?

Honestly I read a lot of solutions about it on the internet,

1. Created a SSL Certificate using Amazon Certificate Manager
2. Added an Application Load Balancer on my Beanstalk
3. Added a Listener port 443, adding the Certificate created on step 1

and after that, I'm receiving 502 Bad Gateway when trying to reach my backend on HTTPS

Tried some solutions that I saw

1. Make API request to HTTP endpoint from AWS Amplify deployed HTTPS (SSL) Client
2. https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https.html
3. https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html

Answer 1

From your description I think you might have missed adding a redirect from HTTP to HTTPS. If that is the case you need to create an additional listener that listens for HTTP request and redirects them to HTTPS.

Here is a link explaining in detail