Uppy file uploader and proxy = headache

Robert Andresen Programming Leave a Comment

While testing the Uppy.io file uploader I struggled with some CORS-errors. Almost the whole day was wasted troubleshooting and debugging. Trying different headers, debugging network-traffic and reading stack overflow.

The browser returned a CORS-error and Uppy itself returned a network traffic error.

// Browser error
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

// Uppy error
This looks like a network error, the endpoint might be blocked by an internet provider or a firewall.

99% of all issues and google-results pointed to an api/server issue with my headers.

The weird part was that my test-images uploaded perfectly, but not any of my example .mp4 videos with 2-4MB in size.

After a few hours of debugging, I finally found a stackoverflow answer pointed to my proxy. As this is on my local network, I’m using nginx-proxy/nginx-proxy and the client_max_body_size here is apparently set very low. The browser then respond to this as a CORS issue for some reason.

The solution is linked in the stackoverflow answer:

In your docker-compose file, specify the location of an additional configuration file. For me, I have the folder config/ where my docker-compose.yml is and inside that folder I placed my_proxy.conf

Inside my_proxy.conf I put client_max_body_size 100m;

In the volumes section I included .config/my_proxy.conf:/etc/nginx/conf.d/my_proxy.conf:ro

Then I did docker-compose up -d and the problem was immediately fixed.

BNolet commented on 24 Mar 2019