CloudFront Cache Issue

Question

We’ve recently encountered an issue where some customers are facing CORS-related errors when trying to load JavaScript files from our CloudFront distribution, despite the correct configuration on our end. Specifically, they are seeing the following error:

Error: Access to script at 'https://new.help.com/webviewer/webviewer-core.min.js' from origin 'https://test.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Background:
We have deployed React pages with static files on our S3 bucket and configured CloudFront in front of it to serve the pages. When a new deployment happens, we invalidate the CloudFront cache every time and enable caching with the "Caching Optimized" option.

However, despite these configurations, some users are experiencing this issue, while I am able to fetch the data without any problems.

Current Configuration:
The current S3 bucket CORS policy is as follows:

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": []
    }
]

re:Post Agent · Answer

The issue you're experiencing with intermittent CORS errors for some users, despite correct configuration, is likely related to caching behavior and propagation delays in CloudFront. Here are some potential reasons and solutions:

1. Caching Issues: CloudFront might be caching an old version of the file without the correct CORS headers for some edge locations. Even though you're invalidating the cache after new deployments, it's possible that not all edge locations have received the updated content.

2. Propagation Delays: Changes to S3 bucket CORS settings or CloudFront distribution settings can take some time to propagate across all edge locations. This could explain why some users experience the issue while others (including yourself) do not.

3. Browser Caching: Some users' browsers might be caching an older version of the file without the correct CORS headers.

To address these issues, consider the following steps:

1. Ensure that CloudFront is set to forward the Origin header to S3. This allows S3 to send the appropriate CORS headers based on the request origin.

2. Use a more aggressive cache invalidation strategy. Instead of invalidating only after deployments, you might want to set up more frequent invalidations or use a wildcard pattern like "/*" to invalidate all objects.

3. Double-check that all objects in your S3 bucket have the correct metadata and headers applied consistently.

4. Consider using a CloudFront Function or Lambda@Edge to add CORS headers directly at the edge. This can ensure that the headers are present regardless of what's cached.

5. Implement versioning in your file names (e.g., webviewer-core.min.js?v=1.2.3) to force browsers to fetch the latest version.

6. If the issue persists, you may want to temporarily switch to the "CachingDisabled" policy in CloudFront to see if it resolves the problem. This will ensure that CloudFront always fetches the latest version from S3, though it may impact performance.

7. Review CloudFront access logs to see if there are any patterns in the requests that are failing, such as specific edge locations or user agents.

If these steps don't resolve the issue, you may need to engage AWS Support for a more in-depth investigation of your specific configuration and usage patterns.  
**Sources**  
[Static JS files served from S3 via CloudFront lead to intermittent CORS issues | AWS re:Post](https://repost.aws/questions/QUKG087BYYSKatKS3Amu7KDw/static-js-files-served-from-s3-via-cloudfront-lead-to-intermittent-cors-issues)  
[CloudFront cache and S3 bucket redirect issue | AWS re:Post](https://repost.aws/questions/QUD2idn40zSjCMDW5kz0ZJCQ/cloudfront-cache-and-s3-bucket-redirect-issue)

CloudFront Cache Issue

Add your answer

Relevant content