Question

The Dropbox Chooser documentation表示直接链接允许CORS，因此您可以使用XMLHttpRequest下载文件内容。（请参阅该文档页面底部附近的“链接类型”。）

然而，当我测试它时，尝试从我自己的Dropbox打开一个文件时，我收到一个关于这个问题的错误：

XMLHttpRequest无法加载https://dl.dropboxusercontent.com/1/view/[REDACTED]/tiny-html-doc.html。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:8000”访问。

此错误消息（来自Mac上的Chrome，版本52.0.2743.33 beta（64位））似乎与文档直接相矛盾，后者表示它们允许使用CORS。

我做错了什么，还是误会了？文档是错误的，还是服务器行为不端？

这似乎与this other SO question有关，但没有答案，但Dropbox dev介入并声称问题已修复。也许它没有100％修复？

Answer 1

您的代码（来自上述评论中的要点）：

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' ]

问题是尝试添加自定义标头。这是触发CORS预检请求（无论如何都不允许这个标题）。

通过注释掉该行来删除标题可以解决问题。

Answer 2

当我尝试下载预览图像时遇到此错误。

默认情况下，<img>标签在获取图像时不要求任何cors标头。然后，与该url关联的请求的配置选项将被缓存，并将被使用，而不是使用cors标头获取新的配置。

在我的crossorigin=""标签中添加属性<img>可以通过确保在请求图像时包括cors标头来解决此问题

Dropbox Chooser直接链接：文档说他们使用CORS，但我得到访问控制错误

2 个答案: