AWS S3 Base64 File Upload Not Working From iPad or Android, but Is Working From a Laptop Safari or Chrome

Question

I have an ionic/angular js web app that uploads a file to django rest framework via base64 encoding. The file then gets saved to an AWS S3 bucket with the help of the django-storages(1.5.1) library.

Accessing the webapp on Chrome (Windows) or Safari (Macbook) and uploading images and files works great.

Accessing the webapp on Chrome (Android Phone) or Safari (iPad), fails with an error of:

XMLHttpRequest cannot load [api url]. Origin [webapp url] is not allowed by Access-Control-Allow-Orign.

Clearly, it's a CORS issue, right? But I can upload form input data just fine... it's the file upload (base64 content in a JSON Restful PUT) that seems to be the difference throwing the error.

For completeness, my AWS S3 CORS configuration is:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

Any thoughts or nudges in a direction that might be the problem?

Answer 1

Resolved!

The problem was in the file upload size - Nginx was capping the size of an HTTP request coming in at 1 MB.

Being the file was uploaded using Base64 encoding in the HTTP PUT request, the HTTP call was getting too large.

When uploading test files from a computer/laptop, they were easily small.

When taking a picture with an phone or tablet to test the upload, it was easily a large file, thus the problem.

Loging in to the server and updating the nginx.config with an increased "client_max_body_size" solved my problem.

Full instructions here: https://www.cyberciti.biz/faq/linux-unix-bsd-nginx-413-request-entity-too-large/