Giters

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

PatrickLevy opened this issue · comments

commented

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:
tsayen/dom-to-image#412

Here is a pr that seems to fix my issue for your consideration based on the above disussion.
#400

Additional Context

commented

👋 @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.

commented

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

commented

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

@sahil6111 Yes, my issue was resolved with the code in this pr: #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.

commented

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

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