S3のImageがhtml2canvasとjsPDFで生成できない

下記のReactコードで、imageの取得をS3から行っていますが、CORSの原因と思われるブロックでうまくダウンロードしたPDFにImageが表示されません。

const handleExportToPdf = async () => { const input = document.getElementById('divToPrint'); if (input) { try { await new Promise((resolve, reject) => { const img = new Image(); img.src = imageUrl!; img.onload = resolve; img.onerror = reject; });

html2canvas(input, { useCORS: true, logging: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', // 横向きに設定 format: 'a4' // A4サイズを使用 }); const imgWidth = pdf.internal.pageSize.getWidth(); const imgHeight = (canvas.height * imgWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); pdf.save("download.pdf"); }).catch(error => { console.error('Error generating PDF', error); }); } catch (error) { console.error('Error loading image', error); } }

下記がCORS設定です。Headers, OriginsともにAllowにしています。

[ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "GET", "HEAD", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [ "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2", "ETag" ], "MaxAgeSeconds": 3000 } ]

エラー内容はこちらです。 4ureqzbte:1 Access to image at 'https://amplify-d5v3hy4jg4lir-mai-customerproductdetailsbu-svly8ybbtt1i.s3.ap-northeast-1.amazonaws.com/customerProductDetails/EVBattery.jpeg?x-amz-content-sha256=(ロケーション情報） ' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ARNの情報です。 arn:aws:s3:::amplify-d5v3hy4jg4lir-mai-customerproductdetailsbu-svly8ybbtt1i

どうしてでしょうか？よろしくお願いします。