AWS blocked mixed content when calling API

Question

I have a front end application in digitalOcean with domain name testDO. This domain has SSL certificate. So all request origin are from https://testDO.com.

I have a backend server sitting in AWS created by deploying war file into beanstalk. It has the name testAWS.us-east-2.elasticbeanstalk.com

When I call API directly from the url for example http://testAWS.us-west-2.elasticbeanstalk.com/myAPI/getName it works. When I call the same API from my front end I get blocked:mixed-content. Is this because its http and not https? what is the workaround?

Answer 1

Yes this is because, your HTTPS site tries to access content through HTTP which is blocked by the browser. You need to either both HTTPS or proxy the request at frontend server and terminate SSL there and forward it to your API Server in Beanstalk.

Note: Since the frontend and backend are in two different environments it will be preferred to use both HTTPS than the proxy approach for security.

Answer 2

You can create a CloudFront Distribution and take it with https to http. You also need to enable CORS in your response to access cross origin domain requests.

Client --> CloudFront --> Your http API (Response with CORS).

Hope it helps.