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?

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.

  • 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 '19 at 14:52
  • @Michael: nice, I removed that part from my answer! – Benoit Esnard Aug 22 '19 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.