XMLHttpRequest Access-Control-Allow-Origin 错误 Google Drive API

Posted 2023-03-03

技术标签:

【中文标题】XMLHttpRequest Access-Control-Allow-Origin 错误 Google Drive API【英文标题】：XMLHttpRequest Access-Control-Allow-Origin Error Google Drive API 【发布时间】：2016-12-09 06:21:45 【问题描述】：

我尝试在 wordpress 主题中访问谷歌驱动器，并在下载所选文件时收到以下错误。

XMLHttpRequest 无法加载 https://drive.google.com/a/mobfish.net/file/d/0B5IETzPj-JCw832h9rdwk/view?usp=drive_web。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://wptest.dev' 因此不允许访问。

（我稍微修改了URL，这不是真实的文件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 添加一些设置？提前致谢，问候。

【问题讨论】：

你为什么使用原始 XMLHttpRequest 而不是the library that Google provides？我已经编辑了我的帖子并添加了整个 javascript 代码。我使用选择器选择一个文件并使用这个developers.google.com/drive/v2/reference/files/get 示例下载它。 【参考方案1】：

也许您遇到的问题在于跨域安全性。基本上，大多数网络浏览器都不允许您从自己的服务器之外的服务器中提取内容，除非服务器表示可以。为此，服务器需要在标头中看到可接受的Access-Control-Allow-Origin。

在这个link 上找到关于如何在 WordPress 中启用 CORS 的教程。只需要在headers文件中添加相应的header即可：

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

您也可以查看这些相关主题：

Access-Control-Allow-Origin Multiple Origin Domains? How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue? Cross-domain post to external site fails on wordpress

希望这会有所帮助！

【讨论】：

以上是关于XMLHttpRequest Access-Control-Allow-Origin 错误 Google Drive API的主要内容，如果未能解决你的问题，请参考以下文章

访问 XMLHttpRequest 时访问 XMLHttpRequest 已被 CORS 策略阻止

XMLHttpRequest 封装

XMLHttpRequest 对象

AJAX - 创建 XMLHttpRequest 对象

XMLHTTPRequest 错误：不推荐使用主线程上的同步 XMLHttpRequest ...（SoundCloud API）