WP Offload Media Simple Illustration – 403,404 and How to Fix Them

This tutorial is for WP Offload Media Plugin + Amazon S3 and Cloudfront CDN.

Let's get started. You can click on the image to start a slider for a better experience.

Create AWS Users

Sign in Amazon Web Services (AWS) account

Navigate to the IAM Users page in the AWS Console

Create Access Keys

Now, it's time to edit the wp-config.php

Find this line:

/* Add any custom values between this line and the "stop editing" line. */

/* That's all, stop editing! Happy publishing. */

Insert the info between the above lines:

define( 'AS3CF_SETTINGS', serialize( array(
    'provider' => 'aws',
    'access-key-id' => '********************',
    'secret-access-key' => '**************************************',
) ) );

Create a New S3 Bucket

Setup Cloudfront CDN

login to Create a CloudFront distribution

It is very important to wait till the distribution is finished and then proceed to the next step.

I once did the operation too fast and when I went to the next step, it showed me this error:

⚠️Offloaded media URLs may be broken. An error was encountered while testing the domain: Received 403 from endpoint

I spent a lot of time searching for answers and finally found out that it was because the distribution was not finished. Hope that helps you as well.

Add a Custom Domain Name

Go to Cloudflare to add a CNAME

Must do it or you will get this error:

⚠️Offloaded media URLs may be broken due to an invalid delivery domain. media.example.com did not resolve to an IP address

Create and Add HTTPS Certificate to Distribution

Log into the AWS Console and visit the AWS Certificate Manager page.

However, I've met this error while requesting the certificate:

Go back to the Distribution page

Must finish these two steps, especially Step 1, or you will get this error:

⚠️Offloaded media URLs may be broken. An HTTP connection error was encountered: cURL error 35: error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure

Configure WP Offload Media to use Amazon CloudFront

Block All Public Access to Bucket

Log into the AWS console and visit the Origin access

Go back to the Distribution page

Enable Block All Public Access for Bucket via WP Offload Media