bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.4k stars 505 forks source link

Need the ability to set Fetch option for cache to "no-cache" #399

Open PatrickLevy opened 1 year ago

PatrickLevy commented 1 year ago

Expected Behavior

I am generating an image that contains images sourced from s3. When the page is initially loaded the browser caches the response, but apparently not all of the related headers. When I use html-to-image to generate an image, I get an error in my browser:

Access to fetch at 'https://s3.us-west-2.amazonaws.com/<folder>/<objectid>?response-content-type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=<cred>&X-Amz-Date=20230503T183941Z&X-Amz-Expires=99999&X-Amz-SignedHeaders=host&X-Amz-Signature=<signature>' from origin 'http://localhost:8080'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
GET https://s3.us-west-2.amazonaws.com/<folder>/<objectId>?response-content-type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=<cred>t&X-Amz-Date=20230503T183941Z&X-Amz-Expires=99999&X-Amz-SignedHeaders=host&X-Amz-Signature=<signature>
::ERR_FAILED 200 (OK)

The url's for my images do not let me use the cacheBust option as aws will not allow a request with with additional parameters as the signatures don't match.

If I disable caching in the browser console everything works as expected.

Possible Solution

It would be nice if there was a way to set the cache option to no-cache when making the fetch call.

I found some related discussion in related repo: https://github.com/tsayen/dom-to-image/issues/412

Here is a pr that seems to fix my issue for your consideration based on the above disussion. https://github.com/bubkoo/html-to-image/pull/400

Additional Context

vivcat[bot] commented 1 year ago

👋 @PatrickLevy

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

sahil6111 commented 8 months ago

@PatrickLevy Facing the same. Were you able to resolve the issue?

PatrickLevy commented 8 months ago

@PatrickLevy Facing the same. Were you able to resolve the issue?

@sahil6111 Yes, my issue was resolved with the code in this pr: https://github.com/bubkoo/html-to-image/pull/400

Since it is not merged I had to use my forked repo in my project though. Hopefully this pr or a similar update gets merged as I would really like to switch back to this upstream project instead of my fork.

johnthepink commented 7 months ago

I was able to use the existing fetchRequestInit option to solve:

toPng(node, {
  fetchRequestInit: {
    cache: 'no-cache',
  },
});