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

Question

下記のコードで、行っていますが、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);
      }
    }
  };
  
  const loadImage = async () => {
    try {
      if (imageFileName) {
        const { url } = await getUrl({
          path: `customerProductDetails/${imageFileName}`,
          options: {
            expiresIn: 3600, // URLの有効期限を秒単位で設定
            validateObjectExistence: true,
          },
        });
        setImageUrl(url.href);
      }
    } catch (error) {
      console.error('Error loading image from S3:', error);
    }
  };

useEffect(() => {
    loadImage();
  }, [imageFileName]);

CORSは下記です。
[
    {
        "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
    }
]

また、Block public access (bucket settings)は、OFFにしましたが、それでもうまくいきませんでした。（今はONですが）

エラー内容です
Access to image at '
' from origin 'http://localhost:5175' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Originは*なので全て通るはずですが...。

何が原因なのでしょうか？

Jaeyoung_C · Answer

お問い合わせいただきありがとうございます。
本事象の原因や対策についてご案内いたします。
ご提示いただいたS3のCORSポリシーを拝見し、以下のことを確認いたしました。
・提示いただいたCORSポリシー
 [{
     "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
 }]
確認できた情報
 "AllowedHeaders": [""]に記載がない。
 "AllowedOrigins": [""]に記載がない。

一般的に下記の例[1]のようにCORS設定を行うため、お客様のユースケースに合わせて修正する必要がございますが、まずは通信を確認するためには"AllowedHeaders"や"AllowedOrigins"の値を「*」に変更していただき、再度処理が正常に行われるかご確認いただきますと幸いです。

[1]Extend S3 resources - React - AWS Amplify Gen 2 Documentation
https://docs.amplify.aws/react/build-a-backend/storage/extend-s3-resources/
例
[{
    "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
}]
もし、本案内で事象が解決しない場合はリソースの詳細を調査が必要を行いますので、サポートケースを起票していただきますと幸いです[2]。
本事象はS3のCORSポリシーに関する内容でございますため、サービスを「Simple Storage Service（S3）」で起票してくださいませ。
なお、その場合は当該S3バケットのARNやエラーログの全文を記載していただきますと幸いです。

[2]Create Case | AWS Support Console
https://support.console.aws.amazon.com/support/home#/case/create

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

Relevanter Inhalt