从浏览器使用Dropbox v2 API [英] Using Dropbox v2 API from Browser

问题描述

我正尝试通过Webbrowser（FF 42.0，PhantomJS 1.9.8）和Dropbox v2 API将数据上传到Dropbox。我的函数看起来像这样

I'm trying to upload data to dropbox via webbrowser (FF 42.0, PhantomJS 1.9.8) and dropbox v2 api. My function looks like this

function(path, data, callback) {
        $.ajax({
            url: 'https://content.dropboxapi.com/2/files/upload',
            type: 'post',
            contentType: 'application/octet-stream',
            beforeSend: function(jqXHR) {
                jqXHR.setRequestHeader("Content-Type","application/octet-stream");
            },
            data: data,
            headers: {
                "Authorization": "Bearer " + token,
                "Dropbox-API-Arg": '{"path": "' + path + ',"mode": "add","autorename": true,"mute": false}',
                "Content-Type": "application/octet-stream"
            },
            success: function (data) {
                callback(data);
            }
        });
    }

甚至我将我可以想到的所有属性都设置为Content-Type到 application / octet-stream 我收到以下错误

Even I set the Content-Type at all attributes I can think of to application/octet-stream I get the following error

Error in call to API function "files/upload": Bad HTTP "Content-Type" header: "application/octet-stream
; charset=UTF-8".  Expecting one of "application/octet-stream", "text/plain; charset=dropbox-cors-hack"

看看Firebug中的请求，我会发现内容-Type确实设置为 application / octet-stream; charset = UTF-8 。尝试 text / plain; charset = dropbox-cors-hack 作为Content-Type，发送的请求具有 text / plain; charset = UTF-8 ，并且得到相同的错误消息。

Taking a look at the request in Firebug shows me that the Content-Type was really set to application/octet-stream; charset=UTF-8. When trying text/plain; charset=dropbox-cors-hack as Content-Type the sent request has text/plain; charset=UTF-8, and I get the same error message.

如何使jquery和浏览器设置所需的标题。

How can I make jquery and my browser to set the headers I need.

编辑：Chrome $ b $中的行为相同b IE可以按预期工作

Same behavior in Chrome IE works as expected

推荐答案

从技术上讲，Firefox只是遵循W3C XMLHttpRequest规范：

Technically, Firefox is just adhering to the W3C XMLHttpRequest spec:

http://www.w3.org / TR / XMLHttpRequest /＃the-send（）方法

发送除 Blob 或 ArrayBufferView 可能会导致浏览器尝试以UTF-8编码数据（遵循规范）的问题。

Sending anything other than a Blob or ArrayBufferView can cause issues with browsers attempting to encode the data in UTF-8 (to follow the spec).

此处正确的做法是避免将数据作为字符串发送。以下是两个避免这种行为的示例：

The right thing to do here is to avoid sending data as a String. Here are two examples of how to avoid this behavior:

// ... file selected from a file <input>
file = event.target.files[0];
$.ajax({
    url: 'https://content.dropboxapi.com/2/files/upload',
    type: 'post',
    data: file,
    processData: false,
    contentType: 'application/octet-stream',
    headers: {
        "Authorization": "Bearer " + ACCESS_TOKEN,
        "Dropbox-API-Arg": '{"path": "/test_ff_upload.txt","mode": "add","autorename": true,"mute": false}'
    },
    success: function (data) {
        console.log(data);
    }
})

或者，如果您要发送文本，可以在上传自己之前对文本进行UTF-8编码。一种现代的方法是使用 TextEncoder ：

Or, if you want to send up text, you can UTF-8 encode the text before uploading yourself. A modern way to do this is using TextEncoder:

var data = new TextEncoder("utf-8").encode("Test");
$.ajax({
    url: 'https://content.dropboxapi.com/2/files/upload',
    type: 'post',
    data: data,
    processData: false,
    contentType: 'application/octet-stream',
    headers: {
        "Authorization": "Bearer " + ACCESS_TOKEN,
        "Dropbox-API-Arg": '{"path": "/test_ff_upload.txt","mode": "add","autorename": true,"mute": false}'
    },
    success: function (data) {
        console.log(data);
    }
})

这篇关于从浏览器使用Dropbox v2 API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！