Does changing an image src attribute to call a PHP function on my server to retrieve an image from another server eliminate CORS policy issues?

Question

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?

Answer 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.