Hosting PDFs on Amazon S3 or CloudFront

Want to host your PDFs on Amazon S3 or serve them through CloudFront and embed them on your WordPress site? Browsers block JavaScript from fetching files hosted on a different domain by default. This security policy is called CORS (Cross-Origin Resource Sharing), and without the right configuration on your storage service, your remotely hosted PDFs will not load.

This guide covers how to configure CORS on Amazon S3(and other cloud services), set up header forwarding in CloudFront, and fix common CDN-related errors that prevent PDFs from loading.

---

Configuring CORS on Amazon S3

To allow your WordPress site to load PDFs from an S3 bucket, enable CORS on that bucket:

1. Go to the AWS console and open the S3 configuration area.
2. Select the bucket storing your PDFs.
3. Click the Properties tab.
4. Under Permissions, click Add CORS Configuration.

XML configuration (standard accounts)

AWS provides a default XML configuration that permits access from any origin:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorisation</AllowedHeader>
  </CORSRule>
</CORSConfiguration>
Code language: HTML, XML (xml)

To restrict access to your own WordPress domain, replace * with your site’s URLs:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
  </CORSRule>
</CORSConfiguration>
Code language: HTML, XML (xml)

JSON configuration (newer S3 accounts)

Newer AWS accounts may require JSON instead of XML. The open-access version:

[
  {
    "AllowedHeaders": [],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]
Code language: JSON / JSON with Comments (json)

To restrict access to your domain:

[
  {
    "AllowedHeaders": [],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["https://example.com"],
    "ExposeHeaders": []
  }
]
Code language: JSON / JSON with Comments (json)

Important: Do not include a trailing slash in the AllowedOrigins value. https://example.com/ will cause an error. Use https://example.com without the slash.

Using CloudFront with S3

If you use CloudFront as a CDN for your S3 bucket, enable header forwarding in the CloudFront distribution:

1. In the AWS console, select the CloudFront distribution paired with your S3 bucket.
2. Go to Distribution Settings > Behaviors.
3. Click the behavior and select Edit (repeat for each behavior if you have more than one).
4. Change the Forward Headers dropdown to Whitelist.
5. Select Origin in the left-hand list and click Add.
6. Click Yes, Edit to save.

CloudFront takes approximately 30 minutes to propagate the change.

Using CloudFront Standalone

CloudFront can serve PDFs directly from your WordPress server without S3, using your site as a Custom Origin. Two steps are required.

Step 1: Add the Access-Control-Allow-Origin header to your WordPress site. Add the following to your .htaccess file on Apache:

Header set Access-Control-Allow-Origin "*"
Code language: JavaScript (javascript)

Step 2: Configure CloudFront to forward the Origin header. Edit your CloudFront distribution behavior, set Forward Headers to Whitelist, and add Origin to the whitelist. After saving, invalidate the CloudFront cache or wait for it to refresh automatically.

CDN-Specific Issues

GoDaddy CDN

If your site uses the GoDaddy CDN, you may see a No Access-Control-Allow-Origin error in the browser console. GoDaddy routes document requests through secureservercdn.net, which blocks cross-origin access.

Set up a CORS rule for the CDN using the S3 configuration steps above. If you do not need the CDN, disabling it in your GoDaddy hosting settings resolves the error without any CORS configuration. Contact GoDaddy support if you need help with either option.

WP Engine CDN

WP Engine routes media through netdna-cdn.com, which can trigger No Access-Control-Allow-Origin errors. After setting up CORS, contact WP Engine support and ask them to add a Post Processing rule that keeps .pdf requests on your own domain. The rule follows this pattern:

#https?://examplecdn-wpengine\.netdna-ssl\.com/(.*)\.(pdf)# => https://example.com/$1.$2;
Code language: PHP (php)

If you also see an Invalid PDF Structure or Failed to Fetch error after setting up CORS, the Post Processing rule is the fix.

Referrer policy error

If the browser console shows the following error and the viewer is stuck on loading:

Failed to set referrer policy: The value '' is not one of 'no-referrer', 'no-referrer-when-downgrade'...
Code language: PHP (php)

Add this line to your .htaccess file:

Header set Access-Control-Allow-Origin "*"
Code language: JavaScript (javascript)

PDF Embedder Secure, when in secure mode, only supports PDFs stored directly on your WordPress server in the securepdfs folder. Hosting those files on S3 or another CDN is not supported in secure mode.

Frequently Asked Questions

Below are some common questions about embedding PDFs from external storage services.

.