I am new to AWS, and I am having problem to use SSL https to connect my Angular frontend (S3 and CloudFront) to the backend (EC2 with Load Balancer).
Here is what I have done:
- Backend is Spring boot (no SSL certification), frontend is angular, database is mySql, domain is from GoDaddy.com.
- Everything works without SSL (https), I can reach my website(non-secure) through http, and the requests from frontend got status 200, and database is updated, all works fine.
- The nightmare starts when I implements SSL. What I did is as below:
- got SSL certification from AWS
- use CloudFront in front of S3 bucket, which contains the Angular js files and serve as static website
- use Load Balancer for EC2 instance
- Load Balancer is listening https 443, and target is using http to EC2 instance
The frontend is loaded with https, but all the requests to backend are blocked. The error in console is "…This request has been blocked, the content must be served over HTTPS".
If I change load balance target to https, and use the AWS certificate, then all the request from frontend with end up with 403 forbidden.
I wonder where I could be wrong. I assume load balancer can forward https to http targets, since I read many articles talking about this.
I wish someone can help me with this, thanks.
I have tried in Angular to use both http and https when making requests. The requests are either blocked or received 403 forbidden.
2
Answers
So I finally made it work with one pending issue, here is a summary what I have done:
Now, user can visit the site by 'https://example.com', and both front end and backend are working. But the thing is I have to make the record 'www.example.com' point to the load balancer, therefore when user visit 'https://www.example.com', he will hit the load balancer, not the Angular frontend. @Mark any suggestions?
That error message means your Angular app is still making requests over HTTP to the backend. Just because you enabled SSL on the load balancer doesn’t mean the Angular app will automatically start using that. You need to make sure your Angular app has been modified so that it is connecting to the load balancer URL, not the EC2 instance, and that it is using
https://
for the connection.Alternatively, you could setup HTTP to HTTPS redirects on the load balancer.
That is the wrong thing to do. The error you are getting is from the web browser, saying that traffic between the web browser and the load balancer isn’t HTTPS. What you are changing in the target group is the traffic between the load balancer and the EC2 server, which isn’t even going to work since there is no SSL certificate on the EC2 server.
Yes, that is absolutely correct. You need the connection to be secure between the web browser and the load balancer, which sounds like what you have setup in AWS.