Cross-domain jQuery AJAX file upload

Question

So the point is I have a subdomain which is API endpoint for uploading files. But when I'm trying to upload anything with jQuery to this subdomain (from main www domain) I'm getting error

XMLHttpRequest cannot load http://1.storage.site.net/upload. Origin http://www.site.net is not allowed by Access-Control-Allow-Origin.

I tried everything: headers in nginx, headers in source code, I even tried sending file to stub file with just

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Content-type: application/json');
header('Access-Control-Allow-Headers: *');

echo json_encode(['lulz' => 123]);

In two words: NOTHING WORKS.

BUT. I noticed that small files (~1MB) upload correctly and files a little bit larger (say 5MB) — NOT (origin not allowed).

Is there any way of solving that?

Answer 1

My bet is that the 5MB file is too large for Apache's max_request_body setting (or whatever its name was), leading to the PHP script not being executed, thus never getting to send those headers, which in turns generates the misleading cross domain error.

If this assumption is true, you should be seeing more details in your browser's "Net" tab - the upload script should be returning an error condition of some sort.

To debug, you could do a normal form-based file upload, test that, and adjust things until it works.