I’ve deployed a ReactJS application in AWS Amplify. That ReactJS app calling a Spring boot service that runs in same AWS EC2 instance. I am getting the following error from ReactJS App that calls EC2 instance.
Mixed Content: The page at 'master.dw1qlg7lxrxk.amplifyapp.com' was loaded over HTTPS, but requested an insecure resource 'ec2-3-145-165-206.us-east-2.compute.amazonaws.com:8080/…'. This request has been blocked; the content must be served over HTTPS.
My ReactJS app is calling in https to ec2 instance (where spring boot is running), but spring boot in ec2 instance runs in http. I think, that’s where this error comes. I need to how to fix this to work this together in feasible way.
2
Answers
There are two options to solve this mix-content issue for good:
Introduce an AWS Application Load Balancer that redirects all HTTP requests to its HTTPS listeners. You will then have to point those listeners to the auto-scaling group or the EC2 instances where you have to run your Spring Boot applications. You may also want to consider sending CORS headers from your Spring Boot server.
You can configure your EC2 instance to support HTTPS transactions but this is a less-scalable solution as it requires reconfiguration of SSL setup when you lose your EC2 instance. This setup will also be limited to one node at a time which should be fine for POCs and small-scale applications that few people would use.
I’d personally go for option 1 most of the time if I have to do professional grade work.
In this case, like Allan Chua said you need a load balancer or configure SSL on the EC2 instance.
But if I am not mistaken you are not very experienced with AWS and you are running a Spring Boot Application.
I would suggest using Elastic Beanstalk instead. This can provision everything for you and even comes out of the box with a SSL certificate for the default CNAME. It also you to easily scale up your application later!