CODEWITHSUNDEEP
javascriptxmlhttprequestcorsdropbox
Nathan
Nathan

Reputation: 1711

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

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?

Upvotes: 2

Views: 1610

Answers (2)

Benjamin Adzovic
Benjamin Adzovic

Reputation: 1

I ran into this error when I was trying to download images that I was previewing.

By default, <img> tags specifically request no cors headers when fetching the image. The configuration options of the request associated with that url are then cached and are going to be used instead of fetching new configurations with the cors headers.

Adding the attribute crossorigin="" to my <img> tag solved the problem by making sure the cors headers are included when requesting the image

Upvotes: 0

user94559
user94559

Reputation: 60153

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.

Upvotes: 2

Related Questions