When serving static assets through AWS CloudFront, you might notice that Chrome handles requests perfectly while Firefox throws CORS errors. This happens because Firefox enforces CORS (Cross-Origin Resource Sharing) policies more strictly for certain file types like fonts.

// Example of CORS error in Firefox console:
Access to font at 'https://yourcloudfront.net/font.woff' from origin 'https://yourdomain.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.

Here's how to properly set up CORS headers in your CloudFront distribution:

1. Go to AWS CloudFront Console
2. Select your distribution
3. Open the "Behaviors" tab
4. Create or edit a behavior pattern
5. Set the following values:
   - Allowed HTTP Methods: GET, HEAD, OPTIONS
   - Cache Based on Selected Request Headers: Whitelist
   - Whitelist Headers: Add 'Origin'
6. Save changes

Your origin S3 bucket needs proper CORS configuration. Create or modify the CORS policy:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

For more granular control over CORS headers, you can use Lambda@Edge:

exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response;
    const headers = response.headers;
    
    headers['access-control-allow-origin'] = [
        { key: 'Access-Control-Allow-Origin', value: '*' }
    ];
    
    headers['access-control-allow-methods'] = [
        { key: 'Access-Control-Allow-Methods', value: 'GET, HEAD, OPTIONS' }
    ];
    
    callback(null, response);
};

After implementing these changes, verify your headers with curl:

curl -I -H "Origin: http://example.com" https://yourcloudfront.net/asset.ext

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, OPTIONS
X-Cache: Hit from cloudfront

Remember to invalidate your CloudFront cache after making changes to ensure the new headers are served:

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

Recently while serving static assets (particularly font files) through AWS CloudFront, I noticed Firefox was throwing CORS errors while Chrome worked perfectly. The curl response showed missing Access-Control-Allow-Origin headers:

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
...
X-Cache: Hit from cloudfront

Modern browsers implement CORS differently. Chrome may cache CORS headers more aggressively or apply different security policies for font loading. Firefox strictly enforces CORS for cross-origin font requests.
Here's the complete fix using AWS resources:
# S3 CORS Configuration (JSON)
[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": []
    }
]

Then configure CloudFront:
# CloudFront Behavior Settings
1. Create new Behavior for font extensions (*.woff, *.ttf, etc.)
2. Set "Cache Based on Selected Request Headers" to "Whitelist"
3. Add "Origin" to whitelisted headers
4. Set "Object Caching" to "Use Origin Cache Headers"

For more control, use Lambda@Edge to inject headers:
exports.handler = (event, context, callback) => {
    const response = event.Records[0].cf.response;
    response.headers['access-control-allow-origin'] = [{
        key: 'Access-Control-Allow-Origin',
        value: '*'
    }];
    callback(null, response);
};

Verify with curl:
curl -I https://your-distribution.cloudfront.net/font.ttf \
-H "Origin: https://yourdomain.com"

Should now include:
Access-Control-Allow-Origin: *