XMLHttpRequest访问控制允许原始错误Google Drive API

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

本文关键字：错误 Google Drive API 原始 访问控制 许原始 XMLHttpRequest      更新时间：2023-09-26

我试图在wordpress主题中访问谷歌驱动器，在下载所选文件时出现以下错误。

XMLHttpRequest无法加载https://drive.google.com/a/mobfish.net/file/d/0B5IETzPj-JCw832h9rdwk/view?usp=drive_web.对飞行前请求的响应未通过访问控制检查：请求的资源上不存在"access control Allow 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？提前谢谢，问候。

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

在这个链接上找到了如何在WordPress中启用CORS的教程。您只需要在头文件中添加适当的头：

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

您也可以查看这些相关线程：

  • 访问控制允许来源多个来源域
  • 如何修复'；缺少跨源资源共享（CORS）响应标头'；webfont问题
  • 在wordpress上跨域发布到外部网站失败

希望这能有所帮助！

相关文章：