2

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?

8
  • I can't reproduce this. My methodology: I used the demo at dropbox.com/developers/chooser to get a "direct" link to a text file in my Dropbox. Then I used the console in Chrome 50.0.2661.102 (64-bit) on a page with jQuery to do $.get('<url>', function (result) { console.log(result); }); and the contents of the file were displayed.
    – user94559
    Commented Jun 9, 2016 at 16:35
  • @Nathan I can't seem to reproduce that error. Can you share the code you're using?
    – Greg
    Commented Jun 9, 2016 at 16:35
  • Thanks for the fast reply. My code is almost exactly this (only superficial changes when pasting into the gist): gist.github.com/nathancarter/aa64790e9fc9973b2fc8b1db1a893fc3 Is it perhaps because I'm serving my pages from localhost:8000?
    – Nathan
    Commented Jun 9, 2016 at 16:46
  • Also, @Greg, when I tried your method with my URL on this very SO page in the Chrome console, it works. It also works when I do it in the console below my own app! So it must be something that $.get does that my XHR code doesn't do.
    – Nathan
    Commented Jun 9, 2016 at 16:49
  • In short, you've solved my problem -- I'm just using your $.get version rather than my raw XHR version. Perhaps once we know the specific piece that was missing in my XHR version, we can post that as the official answer.
    – Nathan
    Commented Jun 9, 2016 at 16:55

2 Answers 2

2

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.

0
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.