Cross-domain chunked uploads using CORS

Question

I have user-submitted files that I'm trying to upload in 10 MB chunks. I'm currently using raw XMLHttpRequest (and XDomainRequest) to push each individual slice (File.prototoype.slice) on the front end. The back end is Nginx using the upload module.

Just for reference, here's the synopsis of how I'm using slice:

element.files[0].slice(...)

I understand the cross-browser prefixed methods webkitSlice and mozSlice and all that.

The problem I have is with actually making the cross-domain request. I'm uploading from server.local to upload.server.local. In Firefox, the options request goes through fine and then the actual post fails. In Chrome and Opera, the options request fails with

 OPTIONS https://URL Resource failed to load

Here are the headers from Firefox:

Request Headers

OPTIONS /path/to/asset HTTP/1.1
Host: upload.server.local:8443
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/20100101 Firefox/18.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Origin: https://server.local:8443
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-disposition,content-type,x-content-range,x-session-id
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

Response Headers

HTTP/1.1 204 No Content
Server: nginx/1.2.6
Date: Wed, 13 Feb 2013 03:27:44 GMT
Connection: keep-alive
access-control-allow-origin: https://server.local:8443
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: x-content-range, origin, content-disposition, x-session-id, content-type, cache-control, pragma, referrer, host
access-control-allow-credentials: true
Access-Control-Max-Age: 10000

The actual post request never leaves the browser. Nginx access logs never see the post. The browser halts it for some reason. How do I unravel why this post is being blocked?

Chromium 24
Firefox 18
Opera 12.14

I've verified all browsers support CORS properly here.

By pointing my uploads to https://cors-test.appspot.com/test, I have confirmed that the problem is definitely with the server-side headers.

What happens if you try this with both sites using HTTP instead of HTTPS? — Old Pro, May 18 '13 at 06:26

Old Pro · Answer 1 · 2013-05-23T06:52:06.213

The POST won't leave the browser if the preflight check does not return sufficient permissions and thus the POST request is not fully authorized. The request/response included in the question does look sufficient to me.

Are you sure you are setting withCredentials = true in your XMLHttpRequest?
Are you sure that you have valid (not self-signed) SSL certificates on your servers? The HTTPS might fail the CORS check even if you have added an exception for browsing the site with an invalid certificate.
Have you tried emptying your cache? You have Access-Control-Max-Age: 10000 set in your response headers. That's close to 3 hours. I know you've been working on this longer than that but while testing especially, set that header to zero instead so you don't go crazy with browser caching of old access permissions.

In general I'd start with going as permissive as possible with the CORS headers and slowly ratcheting up the the security to see where it fails. However, this is not completely straightforward. For example, according to the MDN documentation on CORS,

When responding to a credentialed request, server must specify a domain, and cannot use wild carding. The above example would fail if the header was wildcarded as: Access-Control-Allow-Origin: *

When I send the request part of your question to https://cors-test.appspot.com/test, I get back the following:

HTTP/1.1 200 OK
Cache-Control: no-cache
Access-Control-Allow-Origin: https://server.local:8443
Access-Control-Allow-Headers: content-disposition,content-type,x-content-range,x-session-id
Access-Control-Allow-Methods: POST
Access-Control-Max-Age: 0
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Content-Type: application/json
Content-Encoding: gzip
Content-Length: 35
Vary: Accept-Encoding
Date: Thu, 23 May 2013 06:37:34 GMT
Server: Google Frontend

So you can start from there and add more and more security until it breaks to figure out what is the culprit.

Yes, I have `withCredentials` set to `true` for sure. The certificate is valid also. — fearphage, May 21 '13 at 01:19
I know it sounds horribly lame, but did you clear your caches? I don't know if a cache hit on a CORS pre-flight shows up in Firebug. — Old Pro, May 23 '13 at 06:53
Many, many, many times. I still appreciate the suggestion. You never know. — fearphage, May 23 '13 at 07:11
My next guess is that the browsers are unhappy that the `Access-Control-Allow-Headers` contains protocol headers like `origin` and/or `host`. Try returning `Access-Control-Allow-Headers` that exactly matches the `Access-Control-Request-Headers`. — Old Pro, May 23 '13 at 08:59
I edited the question yesterday to say the same thing. Uploading to `https://cors-test.appspot.com/test` works like a dream. I wonder if non-`Access-Control` headers are what I need to copy. — fearphage, May 23 '13 at 16:37
The `Access-Control-Allow-Headers` you posted from your server includes `origin` and `host`, but the one from cors-test does not. So test that first. — Old Pro, May 23 '13 at 19:17

Cross-domain chunked uploads using CORS

Request Headers

Response Headers

1 Answers1