AWS CloudFront、S3与W3TotalCache环境下CORS Header失效问题

Great question—this is one of those tricky edge cases where DNS configuration ends up impacting seemingly unrelated CORS behavior, so let’s break it down step by step:

1. TXT Records Aren’t Built for Routing HTTP Traffic #

TXT records exist to store arbitrary text data (like domain verification strings or SPF rules)—they have no purpose in resolving domain names for web requests. When you used a TXT record to point to your CloudFront distribution:

• Browsers ignored this TXT record entirely. They either used your existing A/AAAA records or fell back to direct requests to your S3 bucket to load resources.
• This meant your traffic completely bypassed CloudFront’s CDN layer. Without going through CloudFront, your W3TotalCache rules (configured to work with the CDN) didn’t apply, and S3’s CORS settings weren’t being properly relayed to the browser.

2. CNAME Records Properly Route Traffic Through CloudFront #

CNAME records are specifically designed to alias one domain to another. When you switched to a CNAME record pointing your custom domain to CloudFront’s distribution domain:

• All HTTP/HTTPS requests for your custom domain were correctly routed through CloudFront’s CDN nodes.
• CloudFront applied your configured behavior rules, including forwarding S3’s CORS response headers directly to the browser.
• W3TotalCache’s caching policies (tailored for CloudFront) kicked in, ensuring cached font files and their associated CSS included valid CORS headers.
• The browser recognized the request was coming from your custom domain (via CloudFront) and validated the CORS headers against the origin, allowing the font files to load without errors.

3. Browser CORS Strictness and Host Header Mismatches #

Most browsers enforce strict checks for cross-origin font files. When requests bypassed CloudFront:

• The Host header sent to S3 was your bucket’s domain, not your custom domain.
• If your S3 CORS configuration was set to allow requests from your custom domain, this Host header mismatch caused S3 to omit the required CORS headers.
• Using a CNAME ensures the Host header is your custom domain, which aligns with your S3 CORS rules, leading to valid headers being returned.

Bottom Line #

The TXT record effectively skipped the entire CloudFront/CDN pipeline, breaking the chain of CORS header handling and caching rules. The CNAME record is the correct DNS method for routing traffic to CloudFront, ensuring all your configured policies (CORS, caching, etc.) are applied as intended.

内容的提问来源于stack exchange，提问作者itchyspacesuit