google drive: access webContentLink through javascript - Stack Overflow

admin管理员组

文章数量:1406937

I can download the meta data of a text file on Google Drive, but I am unable to access the webContentLink through XMLHttpRequest (XMLHttpRequest.status = 0). A window.open(url) call with the same webContentLink url works fine though. Seems that CORS is not enabled for the webContentLink.

var clientId = '00000000000000';
var apiKey = 'AAAAAAAAAAAAAAAAAA';
var scopes = '';

function loadDoc(url) {
    //window.open(url);
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange = function() {
        alert("readyState = " + xmlhttp.readyState + " status = " + xmlhttp.status);
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //... do something
        }
    }
    xmlhttp.open("GET", url, true);
    var myToken = gapi.auth.getToken();
    xmlhttp.setRequestHeader("Referer", "http://mydomain");
    xmlhttp.setRequestHeader("Accept", "text/x-tex");
    xmlhttp.setRequestHeader("Content-Type", "text/x-tex");
    xmlhttp.responseType = 'arraybuffer';
    xmlhttp.overrideMimeType("text/plain");
    xmlhttp.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token);
    xmlhttp.send();
}

function loadMetaData(url) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var metaData = xmlhttp.responseText;
            var index = metaData.search('"webContentLink"');
            if (index != -1) {
                var i1 = metaData.indexOf('"', index + 17);
                var i2 = metaData.indexOf('"', i1 + 1);
                var fileName = metaData.slice(i1 + 1, i2);
                loadDoc(fileName);
            }
        }
    }
    xmlhttp.open("GET", url, true);
    var myToken = gapi.auth.getToken();
    xmlhttp.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token);
    xmlhttp.send();
}

// A simple callback implementation.
function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        var url = '/' + fileId;
        loadMetaData(url);
    }
}

So, function loadMetaData(url) works fine, and function loadDoc(url) does not. Am I right that this is due to CORS not set for the webContentLink, and is there any chance that this will be changed in the future?

Thanks, Danny

I can download the meta data of a text file on Google Drive, but I am unable to access the webContentLink through XMLHttpRequest (XMLHttpRequest.status = 0). A window.open(url) call with the same webContentLink url works fine though. Seems that CORS is not enabled for the webContentLink.

var clientId = '00000000000000';
var apiKey = 'AAAAAAAAAAAAAAAAAA';
var scopes = 'https://www.googleapis./auth/drive';

function loadDoc(url) {
    //window.open(url);
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange = function() {
        alert("readyState = " + xmlhttp.readyState + " status = " + xmlhttp.status);
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //... do something
        }
    }
    xmlhttp.open("GET", url, true);
    var myToken = gapi.auth.getToken();
    xmlhttp.setRequestHeader("Referer", "http://mydomain");
    xmlhttp.setRequestHeader("Accept", "text/x-tex");
    xmlhttp.setRequestHeader("Content-Type", "text/x-tex");
    xmlhttp.responseType = 'arraybuffer';
    xmlhttp.overrideMimeType("text/plain");
    xmlhttp.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token);
    xmlhttp.send();
}

function loadMetaData(url) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var metaData = xmlhttp.responseText;
            var index = metaData.search('"webContentLink"');
            if (index != -1) {
                var i1 = metaData.indexOf('"', index + 17);
                var i2 = metaData.indexOf('"', i1 + 1);
                var fileName = metaData.slice(i1 + 1, i2);
                loadDoc(fileName);
            }
        }
    }
    xmlhttp.open("GET", url, true);
    var myToken = gapi.auth.getToken();
    xmlhttp.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token);
    xmlhttp.send();
}

// A simple callback implementation.
function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        var url = 'https://www.googleapis./drive/v2/files/' + fileId;
        loadMetaData(url);
    }
}

So, function loadMetaData(url) works fine, and function loadDoc(url) does not. Am I right that this is due to CORS not set for the webContentLink, and is there any chance that this will be changed in the future?

Thanks, Danny

• javascript
• google-drive-api

Share Improve this question Follow asked Aug 8, 2012 at 12:36 Danny RuijtersDanny Ruijters 3,42922 gold badges1919 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If downloading the file through XHR, you should use the downloadUrl instead and provide the access token as the Authorization header as you are already doing.

The webContentLink only supports cookie authentication and can fail when retrieved from an XHR.

edit: the google api has changed and requires an oauthToken nowadays, which I have added.

Solved! Thanks to Alain. Below you can find the correct code. A working example can be found here.

var clientId = '1234567890';
var scopes = 'https://www.googleapis./auth/drive';
var oauthToken;

function getData(url, callback) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open('GET', url, true);
    var myToken = gapi.auth.getToken();
    xmlhttp.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token);
    xmlhttp.send();
}

// Create and render a Picker object
function createPicker() {
    var picker = new google.picker.PickerBuilder()
        .setAppId(clientId)
        .setOAuthToken(oauthToken)
        .addView(google.picker.ViewId.DOCS)
        .setCallback(pickerCallback)
        .build();
    picker.setVisible(true);
}

// A simple callback implementation.
function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        var url = 'https://www.googleapis./drive/v2/files/' + fileId;
        getData(url, function(responseText) {
            var metaData = JSON.parse(responseText);
            getData(metaData.downloadUrl, function(text) {
                //Do something with text...
            });
        });
    }
}

本文标签： google drive access webContentLink through javascriptStack Overflow