I'm trying to download a webpage as a PDF. But images are not coming in PDF, because of this issue:
Access to image at 'https://server.s3-us-west-2.amazonaws.com/images/icon.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
For resolving this issue, I did the following things:
In S3 bucket CORS configuration, I've added this code-
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://localhost:3000/</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
In (react) frontend, I've added a attribute crossorigin="anonymous" into tag:
<img src={process.env.REACT_APP_AWS_S3_PATH + `icons/${data.displayIcon}`} crossorigin="anonymous" alt="icon"/>
Can anyone please tell me, where I'm doing wrong?