2016-08-03 6 views
0

私はWordPressテーマでGoogleドライブにアクセスし、選択したファイルをダウンロード中に次のエラーが表示されるようにします。XMLHttpRequestアクセス制御許可元のエラーGoogleドライブAPI

XMLHttpRequestはhttps://drive.google.com/a/mobfish.net/file/d/0B5IETzPj-JCw832h9rdwk/view?usp=drive_webをロードできません。プリフライト要求への応答がアクセス制御チェックを通過しない:要求されたリソースに「アクセス制御許可」がない。 Origin 'http://wptest.dev'はアクセスできません。

(私はこれが本当のファイルIDではありません、URLを少し変更)

ここでは、JavaScriptのコードです:

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); 
} 

多分私はちょうどhttps://console.developers.google.comでいくつかの設定を追加することを忘れ? ありがとうございました。

+0

[Googleが提供するライブラリ](https://developers.google.com/drive/v3/web/quickstart/js)ではなく、生のXMLHttpRequestを使用しているのはなぜですか? – Quentin

+0

投稿を編集してJavaScriptコード全体を追加しました。私はピッカーを使用してファイルを選択し、このhttps://developers.google.com/drive/v2/reference/files/getの例を使用してダウンロードします。 – pnk

答えて

1

おそらく、あなたが遭遇している問題はCross Origin Securityです。基本的に、ほとんどのWebブラウザでは、サーバーがOKでない限り、自分以外のサーバーからコンテンツを引き出すことはできません。これを行うには、サーバがヘッダに許容されるAccess-Control-Allow-Originを表示する必要があります。

このlinkに見つかりました。ワードプレスでCORSを有効にする方法のチュートリアルです。

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

またこれらの関連するスレッド上で確認すること:あなただけのヘッダファイルに適切なヘッダを追加する必要が

お役に立てれば!

関連する問題