I have a Spring Boot REST API running on an EC2 virtual machine on AWS, which listens on port 8080. I'm hosting the frontend of my application on AWS Amplify. However, I'm encountering an issue where the frontend reports the following error:

我在AWS上的EC2虚拟机上运行了一个Spring Boot rest API，它监听端口8080。我在AWS Amplify上托管我的应用程序的前端。但是，我遇到一个问题，前端报告以下错误：

Mixed Content: The page at [URL] was loaded over HTTPS, but it
requested an insecure resource [IP]. This request has been blocked;
the content must be served over HTTPS.

To resolve this issue, I'm attempting to implement an SSL certificate on an Elastic Load Balancer (ELB) to handle HTTPS traffic. The ELB is set up to redirect requests to my EC2 instance. Please note that I plan to have more than one EC2 instance in the future, and the load balancer is primarily for enabling HTTPS. This SSL certificate is generated from Amazon Credential Manager(ACM).

为了解决这个问题，我尝试在弹性负载均衡器(ELB)上实现一个SSL证书来处理HTTPS流量。ELB被设置为将请求重定向到我的EC2实例。请注意，我计划在未来拥有多个EC2实例，负载均衡器主要用于启用HTTPS。此SSL证书是从Amazon Credential Manager(ACM)生成的。

I have attached images of my EC2 instance, Target Group, Security Group, and Load Balancer configurations. Additionally, I'm using the /meta/check endpoint for both health checks and verification.

我已经附加了EC2实例、目标组、安全组和负载均衡器配置的映像。此外，我使用/meta/check端点进行运行状况检查和验证。

I would appreciate any insights or guidance on why my Load Balancer is not working as expected and how I can resolve the HTTPS mixed content issue.

如果能就我的负载均衡器为什么不能按预期工作以及如何解决HTTPS混合内容问题提供任何见解或指导，我将非常感激。

My answer could able narrow this issue since this might be cause by different variables in your aws parameters.

我的答案可以缩小这个问题，因为这可能是由您的AWS参数中的不同变量引起的。

• Make sure ELB is set up to redirect as 443 requests to EC2 instance as 443, (even with self-assign certificate internally) because you mentioned 8080 port, professional speaking keep it simple with 443 port and this will help you config easier when you replicate or increase different EC2 instance and you might need to add rule for filteration. So conclusion is either both HTTPS or proxy the request at frontend server (ELB) and terminate SSL, If you search similar answer, this will be common advice. ;)


• As per this link, terminate requests should end at HTTPS, which mean ELB does re-encryption of HTTP request. So this might be case you getting mixed content error. https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https.html


• Use this link try test your ELB URL to see if there’s any CSP related. https://www.redirect-checker.org/


• Are you getting any 500 related error if you testing url with developer mode? Sometime this could be causing due to TLS cphier different from EC2 and ELB. During handshake, it doesn’t like it and throw you error. Please check TLSv1.3, TLSv1.2 parameter and encryption cipher. Fore more read this => https://docs.aws.amazon.com/elasticloadbalancing/latest/network/create-tls-listener.html


• This link provide table of cipher which are recommended by ELB to configured on EC2. As per your screenshot listener/rules you are on recommended ‘ELBSecurityPolicy-2016-08’, perhaps test other security policy => https://docs.aws.amazon.com/elasticloadbalancing/latest/classic/elb-security-policy-table.html


• This tester is good to inspect Header, CSP and SSL cipher details. => https://www.ssllabs.com/ssltest/


• I suggest to test your ELB parameter by create test EC2 instance with simple apache default page, or any simple HTML page and test parameters before moving to Spring Boot REST API. This will pin-point any persisting issue regards to SSL at first place. And will save your alot of time!


• If SSL doesn’t help you, then I would suspect this issue could be due to some ‘Content Security Policies’ (CSP) which acts as protection layer in Loadbalance trick. More details => https://docs.aws.amazon.com/elasticloadbalancing/latest/application/x-forwarded-headers.html

I hope my answer will give you more learning opportunity and fix on your error. Goodluck!!

我希望我的回答能给你更多的学习机会，纠正你的错误。祝你好运！