WP Offload Media Plugin”MissingAllowOriginHeader” Error for Kadence Image-Mask

WPutopia leverages Kadence, WP Offload Media and Really Simple SSL.

If you’re not familiar with WP Offload Media, you might want to check out my previous tutorial on how to use this magic plugin to get fast and cheap image hosting, offload your WordPress burden by eliminating the space, and using a CDN. Trust me, it’s a game-changer! 🚀

Anyway, while I was checking the network security when loading a page, I stumbled upon an error that said, “Cross-Origin Resource Sharing error: MissingAllowOriginHeader.” 😕 Now, this little error was causing quite a headache for me because it was hindering the function of the Kadence image-mask by blocking the loading of the shape. I was scratching my head for a while, trying to figure out what was going on.

But guess what? After some digging and experimenting, I finally cracked the code! 🎉 I figured out why this error was happening and how to solve it. And now, I’m excited to share with you a step-by-step tutorial on how to fix this issue and get your Kadence image-mask working like a charm. 😄

CORS issue from CloudFront to server for Images

CORS (Cross-Origin Resource Sharing) is a security mechanism that browsers implement to prevent websites from making requests to domains different from the one serving the web page.

Your error “MissingAllowOriginHeader” occurred because the browser was trying to access resources from your S3 bucket from a different origin (domain) without proper CORS permissions.

Login to S3 Bucket

 Sign in to the AWS Management Console

Open the Amazon S3 console and select the bucket and click on “Permission”

Cross-origin resource sharing (CORS) section

Scroll down to Cross-origin resource sharing (CORS) section and add the following:

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"http://example.com",
],
"ExposeHeaders": []
}
]

Login to Cloudfront Distributions

login to CloudFront distribution and select “Behaviors”

Make sure you have added the OPTIONS method for Viewer section:

Change the Origin request policy permission:

Wrap up

Adding the OPTIONS method was crucial because browsers send a “preflight” OPTIONS request before actual CORS requests

The browser sends this OPTIONS request to check if the actual request is allowed Origin request policy modification ensures CloudFront properly forwards the necessary CORS headers between the client, CloudFront, and S3

The whole flow works like this:

1. Browser makes a request to your resource
2. If it’s a cross-origin request, browser first sends OPTIONS request
3. CloudFront needs to allow OPTIONS method to handle this preflight request
4. The request then goes to S3, which checks against its CORS policy
5. If allowed, S3 returns appropriate CORS headers
6. CloudFront forwards these headers back to the browser
7. Browser sees the CORS headers and allows the actual request to proceed

It’s like having a security guard (browser) checking ID (CORS headers) before allowing a visitor (request) to enter a building (your resources). Both the front desk (CloudFront) and the specific room (S3) need to have the right permissions set up.