0

I am working in React, and I have an image which has an src attribute of https://s3.amazonaws.com/sample_endpoint. My website domain is https://sample-website.com.

I am using a library, dom-to-image, https://www.npmjs.com/package/dom-to-image-more, which takes any html element and converts all of its children elements to an image.

The base element I am using has this image mentioned above inside of it. When I use the library, it gives me the following:

Access to image at 'https://s3.amazonaws.com/sample_endpoint' from origin 'https://sample-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Unfortunately, there are no options with this library to set the Access-Control-Allow-Origin header. That's why I wanted to try out this option but I'm not sure if this eliminates the CORS issue.

Approach:

Change the src attribute of the image from a hardcoded s3 server url to a PHP function call. This would mean that the PHP code running on https://sample-website.com is requesting the resource, therefore being on the same domain and avoiding the CORS policy issue.

So, before it would be: src="https://s3.amazonaws.com/sample_endpoint"

and now: src="getImages()"

where getImages() sends an HTTP request to the backend at some endpoint.

Will this get around the CORS policy issue?

0

1 Answer 1

1

Using your PHP server to proxy the request to the S3 server will indeed help you to solve that CORS issue, since your webpage and the image will be on the same origin.

2
  • I edited my question a bit. getImages() is sending an HTTP get request to an endpoint on my server. Glad to hear this should work!
    – Michael
    Aug 22, 2019 at 14:52
  • @Michael: nice, I removed that part from my answer! Aug 22, 2019 at 15:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .