Stop Cloudflare from caching redirects - redirect

Question

I have a bit of a unique situation here.
We have a domain that hosts user uploaded media (that has had image operations applied to it) (usermedia.com). Media is stored in an Amazon S3 bucket and Cloudflare sits in front of this bucket.
If a user requests an image, they might browse to https://usermedia.com/my-image-resize-200-200.jpg.
If this image exists, it is served, otherwise Amazon S3 does a 302 redirect (via Routing Rules) to https://app.com/generate/my-image-resize-200-200.jpg which generates the resized image, uploads it to S3, and then does another redirect back to https://usermedia.com/my-image-resize-200-200.jpg. This time the file exists in S3 and is served.
The problem is when we have the Cloudflare proxy enabled - it caches redirects and so if the media doesn't exist, Cloudflare gets stuck in a continuous redirect cycle. I've tried using a 307 redirect but the problem persists.
Any ideas how to get around this issue?

Answer 1

I have an exact same setup and some problem. I found out that the problem is indeed the clouldflare. When the image doesn't exist, S3 returns a 307 pointing to the resizer endpoint, the problem here is that cloudflare adds the cache header (e.g.: cache-control:public, max-age=691200) because probably you have on the caching tab the option Browser Cache Expiration set, so when the browser gets the response it will cache it (because a cache-control header is present), so the next request will be served from browser cache.
UPDATE:
A quick solution may be simple. On cloudflare set Browser Cache Expiration to "Respect Existing Headers", this way cloudflare will not add the headers that make browser cache the response. If you still want images to be cached locally, simply set the cache-control header directly on the S3 image when creating it from the resize script
S3.putObject({
Body: buffer,
Bucket: BUCKET,
ContentType: 'image/jpeg',
CacheControl: 'max-age=604800',
Key: finalKey,
})
If you have other assets (e.g. css or javascript, etc) you can set the CacheControl header for them as well from the aws console, or, if you have them in some folder, let's say "foo", you can go to Cloudflare, create a page rule and instruct to set the Browser Cache TTL for all files under the "foo" folder.
I know this is a late answer but hope to help people having the same problem in the future

Answer 2

At the moment I see that Cloudflare doesn't cache 307 redirects. First query:
Second query:
You can set the respose code in S3 redirection rules like this:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>app.com</HostName>
<HttpRedirectCode>307</HttpRedirectCode>
</Redirect>
</RoutingRule>
</RoutingRules>