I have a question about the application of html2canvas in a custom leaflet deployed to AWS s3.

I have created a custom TileLayer in a leaflet and deployed the data to AWS s3 so that it can be retrieved with the following URL as an example.

http://{s}.somedomain.com/{z}/{x}/{y}.png

In this state, we have succeeded in drawing the map data using react-leaflet.

However, when we try to get the map data image using html2canvas, the map data will not be displayed. In this case, the following error message is output to the console.

Access to image at 'http://{s}.somedomain.com/{z}/{x}/{y}.png' from origin 'http://localhost:3000/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It looks like a CORS error, but the configuration in AWS S3 is as follows.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET".
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

As you can see, we are allowing requests from all origins. However, I can't figure out why the above error occurs.

If anyone has encountered such a situation, please let me know the solution.