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

0

下記の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

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

gefragt vor einem Monat274 Aufrufe
1 Antwort
0

この質問に回答するためには、非公開情報であるリソースの詳細な調査が必要です。 次のリンクを使用して AWS のサポートケースを開いていただけますようお願い申し上げます。 https://console.aws.amazon.com/support/home#/case/create

AWS
beantwortet vor einem Monat

Du bist nicht angemeldet. Anmelden um eine Antwort zu veröffentlichen.

Eine gute Antwort beantwortet die Frage klar, gibt konstruktives Feedback und fördert die berufliche Weiterentwicklung des Fragenstellers.

Richtlinien für die Beantwortung von Fragen