EC2 hosted WordPress - GET request from domain to EC2 host denied. "net::ERR_CONNECTION_REFUSED"

Question

I have Wordpress hosted via an EC2 instance with traffic from domain routed through an ALB with an ACM issues certificate.

I have been struggling with a "Mixed Content Error" which is causing my site theme/styles to not display when connecting through the domain and ALB. When connecting directly to the EC2 public IP, everything displays as expected. To resolve the HTTP/HTTPS mixed content error, I installed the SSL insecure content plugin which resolved the mixed content error message but presented this new issue.

When accessing the page from the Route53 domain name which directs to the ALB - these are the errors I encounter in the console.

"DOMAIN_NAME"/:29 
        
GET https://"EC2_Public_IP"/wp-includes/css/dist/block-library/style.min.css?ver=6.4.2 net::ERR_CONNECTION_REFUSED

"DOMAIN_NAME"/:41 
                
GET https://"EC2_Public_IP"/wp-content/themes/generatepress.3.3.1/generatepress/assets/css/main.min.css?ver=3.3.1 net::ERR_CONNECTION_REFUSED

There are a few other similar errors with different indexes and one separate error with a dropdown.

(index):13
 
GET https://"EC2_Public_IP"/wp-includes/js/wp-emoji-release.min.js?ver=6.4.2 net::ERR_CONNECTION_REFUSED
t           @   (index):13
(anonymous) @   (index):13
Promise.then (async)        
(anonymous) @   (index):13
(anonymous) @   (index):13

I have tried removing the plugin and fixing the mixed content error through other means with no success. Hopefully someone here can help me dig a bit further into this.

Answer 1

The mixed content error arises when certain static resources, such as CSS files, JavaScript, and images, are loaded using HTTP instead of HTTPS.

1. In your WordPress admin panel, navigate to Settings > General and ensure that both the WordPress Address and Site Address are configured to use https://.

2. URLs in your static content, like posts, CSS files, images, etc., that use http:// need to be updated to https:// to ensure secure connections. You can use a plugin like Better Search Replace to locate and substitute all occurrences of http:// with https:// in your WordPress database.

3. In wp-config.php, you can enforce HTTPS with the following lines:

if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')  
    $_SERVER['HTTPS']='on';