AWS CloudFront base64 file upload randomly got 502 Bad Gateway error

I have build a upload function for my customer. Due to SQL injection prevent, some of my customer images got blocked by CloudFront. But instead of trying to manually clean these injection, customer want normal upload. (I can use some tool like imagemagick to convert back and ford png/jpg for example to clean injection part).
So I ended up by using base64 encoding and custom jQuery fileupload (blueimp). This lead to some other problems, mostly randomly got 502 error on batch of 200 files upload.

https://stackoverflow.com/questions/20664018/cloudfront-custom-origin-distribution-returns-502-error-the-request-could-not-b

https://www.tessian.com/blog/how-to-fix-http-502-errors/

I had a similar issue recently which turned out to be due to ssl_ciphers that I was using.

From http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html,

"CloudFront forwards HTTPS requests to the origin server using the SSLv3 or TLSv1 protocols and the AES128-SHA1 or RC4-MD5 ciphers. If your origin server does not support either the AES128-SHA1 or RC4-MD5 ciphers, CloudFront cannot establish an SSL connection to your origin. "

I had to change my nginx confg to add AES128-SHA ( deprecated RC4:HIGH ) to ssl_ciphers to fix the 302 error. I hope this helps. I have pasted the line from my ssl.conf

ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:RSA+3DES:AES128-SHA:!ADH:!AECDH:!MD5; 

https://aws.amazon.com/blogs/security/three-most-important-aws-waf-rate-based-rules/

https://blogs.halodoc.io/apply-rate-limiting-to-your-resources-using-aws-cloud-front-and-waf/

https://blogs.halodoc.io/apply-rate-limiting-to-your-resources-using-aws-cloud-front-and-waf/

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#singlefileuploads

For my case simple reduce  concurrent uploading files solved issue.

limitConcurrentUploads: 10,

    const maxChunkSize = 5000 * 1000;

    $("#fileupload").fileupload({

        url: 'uploadMediaFile',

        dataType: "json",

        autoUpload: true,

        // maxChunkSize: maxChunkSize,

        dropZone: $('#drag-and-drop-zone'),

        disableImageResize: true,

        // limitConcurrentUploads

        // sequentialUploads: false,

        // singleFileUploads: false,

        // limitMultiFileUploadSizeOverhead,

        limitMultiFileUploads: 10,

        add: function (e, data) {

            var acceptFileTypes = extFilter;

            let file = data.originalFiles[0];

            if (typeof file == 'undefined') {

                console.log('undefined file');

                return;

            }
....
});