Dropbox Chooser direct links: Docs say they use CORS, but I get access control errors

Question

The Dropbox Chooser documentation says that direct links permit CORS, so that you can download file content with an XMLHttpRequest. (See "Link types," near the bottom of that documentation page.)

When I test it out, however, trying to open a file from my own Dropbox, I get an error about exactly that problem:

XMLHttpRequest cannot load https://dl.dropboxusercontent.com/1/view/[REDACTED]/tiny-html-doc.html. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

This error message (from Chrome on Mac, version 52.0.2743.33 beta (64-bit)) seems to directly contradict the docs, which say they allow CORS.

Am I doing something wrong, or misunderstanding? Are the docs wrong, or the server misbehaving?

This seems related to this other SO question, which doesn't have an answer, but a Dropbox dev stepped in and claimed the problem was fixed. Perhaps it's not 100% fixed?

Answer 1

Your code (from the gist in a comment above):

Dropbox.choose
    success : ( files ) ->
        console.log 'Looking for', files[0].bytes, 'bytes at', files[0].link, '...'
        xhr = new XMLHttpRequest()
        xhr.addEventListener 'load', ->
            console.log 'Got HTML starting with this:',  @responseText.substring 0, 200
        xhr.open 'GET', files[0].link
        // The problem is the following line.
        xhr.setRequestHeader 'Api-User-Agent', 'name of my app here'
        xhr.send()
    linkType : 'direct'
    multiselect : no
    extensions : [ '.html' ]

The issue is the attempt to add a custom header. This is triggering the CORS preflight request (and this header wouldn't be allowed anyway).

Removing the header by commenting out that line fixes the problem.