Introduction CORS policy misconfiguration on CDN blocks cross-origin requests from web applications, causing frontend errors that are difficult to debug.

Symptoms - Browser console: "Access to fetch has been blocked by CORS policy" - Error: "No Access-Control-Allow-Origin header is present" - Preflight (OPTIONS) request returning 403 - Works with curl but fails in browser - Some origins work while others blocked

Common Causes - CDN not forwarding CORS headers from origin - Allowed origins list missing the frontend domain - CDN caching CORS response without proper Vary header - Missing Access-Control-Allow-Methods or Allow-Headers - Preflight response cached incorrectly

Step-by-Step Fix 1. **Test CORS headers from origin and CDN': ```bash # Direct from origin curl -I -H "Origin: https://app.example.com" -H "Access-Control-Request-Method: GET" \ https://origin.example.com/api/data # Through CDN curl -I -H "Origin: https://app.example.com" -H "Access-Control-Request-Method: GET" \ https://cdn.example.com/api/data ```

  1. 1.**Configure CDN CORS headers':
  2. 2.```bash
  3. 3.# CloudFront: Use Lambda@Edge or CloudFront Functions to add CORS headers
  4. 4.# Or configure origin to return proper CORS headers
  5. 5.`
  6. 6.**Ensure Vary: Origin header is present':
  7. 7.Origin should include Vary: Origin in responses.

Prevention - Configure CORS at the origin, not the CDN - Use specific allowed origins (not wildcard *) - Test CORS from all frontend domains - Monitor CORS-related errors in frontend - Implement CORS validation in API gateway