XMLHttpRequest Access-Control-Allow-Origin Error Google Drive API

Question

I try to acces google drive in a wordpress theme and get the following error while downloading a selected file.

XMLHttpRequest cannot load https://drive.google.com/a/mobfish.net/file/d/0B5IETzPj-JCw832h9rdwk/view?usp=drive_web. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://wptest.dev' is therefore not allowed access.

(I modified the URL a little bit, this is not the real file ID)

Here is the JavaScript Code:

var developerKey = document.getElementById('key').innerHTML;
var clientId = document.getElementById('clientID').innerHTML;


// Scope to use to access user's photos.
var scope = ['https://www.googleapis.com/auth/drive.readonly'];

var pickerApiLoaded = false;
var oauthToken;

// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
  gapi.load('auth', {'callback': onAuthApiLoad});
  gapi.load('picker', {'callback': onPickerApiLoad});
  gapi.load("client");
}

function onAuthApiLoad() {
  window.gapi.auth.authorize(
          {
            'client_id': clientId,
            'scope': scope,
            'immediate': false
          },
  handleAuthResult);
}

function onPickerApiLoad() {
  pickerApiLoaded = true;
  createPicker();
}

function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    oauthToken = authResult.access_token;
    createPicker();
  }
}

// Create and render a Picker object for picking user Photos.
function createPicker() {
  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.DocsView(google.picker.ViewId.DOCS_IMAGES_AND_VIDEOS)
      .setIncludeFolders(true)
      .setSelectFolderEnabled(true);

    var picker = new google.picker.PickerBuilder().
            hideTitleBar().
            disableFeature(google.picker.Feature.NAV_HIDDEN).
            addView(view).
            setOAuthToken(oauthToken).
            setDeveloperKey(developerKey).
            setCallback(pickerCallback).
            build();
    picker.setVisible(true);
  }
}

// A simple callback implementation.
function pickerCallback(data) {
  var url = 'nothing';

  if (data.action == google.picker.Action.PICKED) {
    var file = data.docs[0];
    download(file);
  }
}

function download(file) {
  console.log("downloading " + file.id);
  console.log(file);
  var downloadUrl;

  if (file.url) {
    var accessToken = gapi.auth.getToken().access_token;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', file.url);

    xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    xhr.onload = function() {
      callback(xhr.responseText);
    };
    xhr.onerror = function() {
      callback(null);
    };
    xhr.send();
  } else {
    callback(null);
  }
}

function callback(param) {
  console.log(param);
}

Maybe i just forget to add some settings at https://console.developers.google.com ? Thanks in advance, regards.

Why are you using raw XMLHttpRequest instead of [the library that Google provides](https://developers.google.com/drive/v3/web/quickstart/js)? — Quentin, Aug 03 '16 at 13:34
I've edit my post and add the whole javascript code. I use the picker to pick a file and use this https://developers.google.com/drive/v2/reference/files/get example do download it. — PinkyTV, Aug 03 '16 at 13:42

score 0 · Answer 1 · edited May 23 '17 at 10:28

Maybe the problem that you are running into is in Cross Origin Security. Basically, most web-browsers will not allow you to pull in content from servers outside your own, unless the server says it is ok. To do this, the server needs to see an acceptable Access-Control-Allow-Origin in the headers.

Found on this link the tutorial on how to enable CORS in WordPress. You only need to add the appropriate header to the headers file:

<?php /** @package WordPress @subpackage Default_Theme  **/
header("Access-Control-Allow-Origin: *"); 
?>
<!DOCTYPE html>

You may also check on these related threads:

Hope this helps!

XMLHttpRequest Access-Control-Allow-Origin Error Google Drive API

1 Answers1