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

Ich versuche, Google Drive in einem Wordpress-Theme zu erreichen und beim Herunterladen einer ausgewählten Datei den folgenden Fehler zu erhalten.XMLHttpRequest Access-Control-Allow-Origin-Fehler Google Drive-API

XMLHttpRequest kann nicht geladen werden https://drive.google.com/a/mobfish.net/file/d/0B5IETzPj-JCw832h9rdwk/view?usp=drive_web. Die Antwort auf die Preflight-Anforderung übergibt die Zugriffskontrollprüfung nicht: Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Ursprung 'http://wptest.dev' ist daher nicht erlaubt.

(I modifiziert, um die URL ein wenig, diese ID nicht die eigentliche Datei ist)

Hier ist der 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); 
}

Vielleicht vergessen ich gerade bei https://console.developers.google.com einige Einstellungen hinzufügen ? Vielen Dank im Voraus, Grüße.

Quelle

2016-08-03 pnk

Warum verwenden Sie rohe XMLHttpRequest anstelle von [die Bibliothek, die Google bereitstellt] (https://developers.google.com/drive/v3/web/quickstart/js)? – Quentin

Ich habe meinen Beitrag bearbeitet und füge den ganzen JavaScript-Code hinzu. Ich benutze den Picker, um eine Datei auszuwählen und benutze dieses https://developers.google.com/drive/v2/reference/files/get Beispiel, um es herunterzuladen. – pnk

Vielleicht ist das Problem, dass Sie in Cross Origin Security kennen. Grundsätzlich erlauben die meisten Web-Browser nicht, dass Sie Inhalte von Servern außerhalb Ihrer eigenen abrufen, es sei denn, der Server sagt, es ist in Ordnung. Um dies zu tun, muss der Server eine akzeptable Access-Control-Allow-Origin in den Headern sehen.

Gefunden auf dieser link das Tutorial zum Aktivieren von CORS in WordPress. Sie müssen nur den entsprechenden Header an die Header-Datei hinzuzufügen:

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

Sie auch auf diese verwandten Themen überprüfen können:

Hoffe das hilft!

Quelle

2016-08-04 10:14:52 abielita

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

Antwort

Verwandte Themen