WordPress and CloudFront

When putting WordPress behind CloudFront, you're encountering common issues related to the WordPress admin functionality. The problems you're seeing in the console are likely related to how CloudFront is handling requests to your WordPress admin area.

Your current setup has the right general approach with separate behaviors for wp-admin, but there are a few adjustments needed:

1. For /wp-admin behavior*:

• Using Managed-CachingDisabled is correct since you don't want to cache admin content
• Using Managed-AllViewer is appropriate to forward all headers, cookies, and query strings

2. For the / behavior*:

• This is currently set to no caching (Managed-CachingDisabled), which negates much of CloudFront's benefit
• This should be changed to a caching policy that allows caching but respects WordPress's dynamic content needs

3. For Default (*) behavior:

• Your custom CachePolicy-With-Host-Header is a good start, but may need additional headers

Here are the recommended changes:

1. For wp-admin behavior: Keep as is, but ensure it has the highest precedence (lowest number)

2. For dynamic WordPress content:

• Create a behavior for patterns like /wp-json/ and /wp-login.php with Managed-CachingDisabled
• These endpoints need to bypass caching completely

3. For static assets:

• Create behaviors for /wp-content/uploads/, */wp-includes/, and /wp-content/themes/ with a caching policy that enables longer caching times
• These are static files that can be safely cached

4. For the default behavior:

• Use a cache policy that forwards cookies that WordPress needs (like wordpress_, wp-settings-, etc.)
• Ensure the Host header is forwarded (as you've done with your custom policy)
• Forward query strings that WordPress uses

5. Additional settings to check:

• Ensure your origin response timeout is sufficient (WordPress admin can be slow)
• Check that your CloudFront distribution allows all HTTP methods needed (GET, POST, PUT, DELETE, etc.)
• Verify CORS settings if you're seeing related errors in the console

The most common issue with WordPress admin behind CloudFront is related to cookies and headers not being properly forwarded to the origin. Your Managed-AllViewer policy should handle this for the admin area, but you may need to create a more specific policy for the rest of the site that forwards only WordPress-specific cookies rather than all viewer cookies.
Sources
Backend and Frontend on same domain Cloudfront error | AWS re:Post
CloudFront 502 Error - Previously working setup with a Google Cloud Run origin suddenly starts failing, experienced across 2 separate google accounts and servers, the common denominator is CloudFront. | AWS re:Post
Caching web page images when origin is set to alb for Cloudfront | AWS re:Post

I try to edit/create a page in WordPress this doesn’t work anymore (getting errors on the console when inspecting).

Do you have a valid HTTPS cert installed on your EC2 instance, and have configured HTTPS Only in your Origin Protocol Policy?

If yes, login to WordPress and change your Site Address (URL) and WordPress Address (URL) to your CloudFront URL.