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 mydocker-compose.ymlis and inside that folder I placedmy_proxy.confInside
my_proxy.confI putclient_max_body_size 100m;In the volumes section I included
.config/my_proxy.conf:/etc/nginx/conf.d/my_proxy.conf:roThen I did
BNolet commented on 24 Mar 2019docker-compose up -dand the problem was immediately fixed.