XMLHttpRequest訪問控制 - 允許來源錯誤谷歌驅動器API

我嘗試訪問wordpress主題中的谷歌驅動器，並在下載選定的文件時出現以下錯誤。XMLHttpRequest訪問控制 - 允許來源錯誤谷歌驅動器API

XMLHttpRequest無法加載https://drive.google.com/a/mobfish.net/file/d/0B5IETzPj-JCw832h9rdwk/view?usp=drive_web。對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在「訪問控制 - 允許來源」標頭。因此'Origin'http://wptest.dev'不允許訪問。

（我修改了網址一點點，這不是真正的文件ID）

這裏是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增加一些設置？在此先感謝，問候。

來源

2016-08-03 pnk

爲什麼使用原始XMLHttpRequest而不是[Google提供的庫]（https://developers.google.com/drive/v3/web/quickstart/js）？ – Quentin

我編輯了我的帖子並添加了整個javascript代碼。我使用選取器選擇一個文件並使用此https://developers.google.com/drive/v2/reference/files/get示例下載它。 – pnk

也許你遇到的問題是在Cross Origin Security中。基本上，大多數網絡瀏覽器不允許你從你自己以外的服務器獲取內容，除非服務器說它沒問題。爲此，服務器需要在標題中看到可接受的Access-Control-Allow-Origin。

在此link上找到關於如何在WordPress中啓用CORS的教程。你只需要適當的頭添加到頭文件：

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

您也可以檢查這些相關的主題：

希望這可以幫助！

來源

2016-08-04 10:14:52 abielita

XMLHttpRequest訪問控制 - 允許來源錯誤谷歌驅動器API

回答

相關問題