Skip to content

Conversation

scmmishra
Copy link
Member

When downloading images programatically, the request can often fail with a CORS error. This happens even if the CORS headers are correctly set for the S3 bucket.

The problem here is the browser, once the image is loaded correctly on the browser, chrome will store the response in it's cache. And when we fetch the image in the downloadFile method. The cached response is served. Which, does not have the Access-Control-Allow-Origin header.

Multiple threads across the internet highlight this issue

  1. https://serverfault.com/questions/856904/chrome-s3-cloudfront-no-access-control-allow-origin-header-on-initial-xhr-req/856948#856948
  2. Inconsistent failed to fetch image on aws s3, blocked by CORS although the origin already enabled on the server diegomura/react-pdf#1283
  3. https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome

This PR attempts to fix this by skipping cache when raising the fetch request

Copy link

github-actions bot commented Jan 29, 2025

size-limit report 📦

Path Size
dist/utils.cjs.production.min.js 6.12 KB (-0.34% 🔽)
dist/utils.esm.js 5.55 KB (-0.34% 🔽)

@scmmishra scmmishra requested a review from iamsivin January 29, 2025 08:27
@iamsivin iamsivin merged commit 4ce2bc5 into main Jan 29, 2025
8 checks passed
scmmishra added a commit to chatwoot/chatwoot that referenced this pull request Jan 29, 2025
# Pull Request Template

## Description
Ref: chatwoot/utils#39

---------

Co-authored-by: Shivam Mishra <[email protected]>
conexaoazul pushed a commit to conexaoazul/magicachat that referenced this pull request Mar 5, 2025
# Pull Request Template

## Description
Ref: chatwoot/utils#39

---------

Co-authored-by: Shivam Mishra <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants