R2 does not add Vary: Origin header which breaks future CORS requests

R2 does not add Vary: Origin header when the request doesn’t include Origin header. This causes issues on Chrome because Chrome will use cached non-cors response to requests requiring cors headers. Because it’s not included, it’s not possible to use non-cors + cors request to the same R2 resource on Chromium browser. The issue goes like this:

  • Load a css file using <link src="...
  • Chrome caches the request
  • Try to load the same file using fetch call
  • It fails because Chrome uses cached response which does not include CORS headers

As far as I know all of this is because R2 does not include Vary: Origin header during the first request. Here’s a post explaining the issue in more detail, it’s talking about S3 because S3 has the same bug. amazon s3 - Chrome S3 Cloudfront: No 'Access-Control-Allow-Origin' header on initial XHR request - Server Fault

2 Likes

The solution is to add the Vary: Origin header to all R2 request with transform rules. Detailed instructions here:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.