Django AWS S3 JSPDF not loading image cors

I would appreciate some help.

On my development I am able to create a PDF with an image without any problems, when i try the same page on my production I keep getting and error on my console and it gives me a pdf without the image.

Access to image at 'https://example.s3.amazonaws.com/static/logos/example.png' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Error loading image https://example.s3.amazonaws.com/static/logos/example.png

AWS settings: Block all public access: Off

bucket policy:
{
    "Version": "2012-10-17",
    "Id": "Policy1735675563626",
    "Statement": [
        {
            "Sid": "Stmt1735675561227",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::cabiunascompras/*"
        }
    ]
}

I have this as my CORS policy on AWS bucket

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

And this is my javascript to build pdf:

function printOC() {
        $('#print-oc').show()
        const { jsPDF } = window.jspdf;

        const input = document.getElementById('print-oc');
        const pdf = new jsPDF({
            orientation: 'portrait',
            unit: 'pt',
            format: 'a4',
            compress: true,
        });

  
        pdf
            .html(input, {
                margin: [10, 0, 10, 0],
                autoPaging: 'text',
                html2canvas: {
                    scale: 595.26 / srcwidth, //595.26 is the width of A4 page
                    scrollY: 0,
                    useCORS: true
                },
            })
            .then(() => {
                const pageCount = pdf.internal.getNumberOfPages();
                const pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();

                //loop to set header/ footer, style, alignment, text style to the page
                for (let i = 1; i <= pageCount; i++) {
                    pdf.rect(
                        5,
                        5,
                        pdf.internal.pageSize.width - 10,
                        pdf.internal.pageSize.height - 10,
                        'S',
                    );

                    pdf.setPage(i);
                    // pdf.addImage(img, "PNG", 10, 10, 100, 30);
                    pdf.viewerPreferences({ "FitWindow": true, "ViewArea": "MediaBox", "ViewClip": "MediaBox" });
                    const footer = `Página ${i} de ${pageCount}`;

                    pdf
                        .setFont('helvetica', '', 'normal')
                        .setFontSize(6)
                        .text(
                            footer,
                            pageWidth / 1.08 - pdf.getTextWidth(footer) / 2,
                            pageHeight - 10,

                            { baseline: 'bottom|right' },
                        );

                }
                pdf.save(
                    `OC-` + {{ oc_id }} +`.pdf`,
            );

    })
    .then(() => {
        $('#print-oc').hide()
    })

    }

I have tried adding django-header-cors but i did not get a successful result.

Thank you

Вернуться на верх