当前位置: 首页 > 知识库问答 >
问题:

https://www.googleapis.com/upload/drive/v2/files真的支持CORS吗?

宇文德明
2023-03-14

更新:这是GoogleDrive中的一个错误,CORS未启用上传URI。@Nivco向我指出了使用iframe和代理(而不是CORS)的Google客户端库的工作。我将(测试过的)工作代码放在底部,并附有详细说明。请参阅下面的示例答案。

通过API将文件插入到谷歌云端硬盘并使用JavaScript授权谷歌云端硬盘表示上传终端节点支持CORS,但我无法使用它们。我可以使用 Files: insert 获取授权并插入一个空文件,但我无法将内容上传到其中 - 当我使用 https://www.googleapis.com/upload/drive/v2/files 当我使用插入文件堆栈溢出帖子中的示例中给出的两种技术中的任何一种时,我得到一个405(不允许的方法)错误。

是否有可能 CORS 适用于 v1,但尚未为 v2 启用?

编辑:顺便说一句,405错误是在chrome发出的选项请求上。

编辑:以下是我尝试的代码

在演示代码之前,我想强调一下,我能够对文件进行身份验证和列出文件。我只是无法将数据上传到文件。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://www.googleapis.com/upload/drive/v2/files?uploadType=multipart');
xhr.setRequestHeader('Authorization', 'Bearer ' + params.access_token);
xhr.setRequestHeader("Content-Type",  'multipart/related; boundary="END_OF_PART"');
xhr.onreadystatechange = function(data) {
  if (xhr.readyState == DONE) {
    document.getElementById("files").innerHTML = "Uploaded file: " + xhr.responseText;
    };
  }
xhr.send([
  mimePart("END_OF_PART", "application/json", json),
  mimePart("END_OF_PART", "text/plain", "a\nb\n"),
  "\r\n--END_OF_PART--\r\n",
].join(''));
function mimePart(boundary, mimeType, content) {
  return [
    "\r\n--", boundary, "\r\n",
    "Content-Type: ", mimeType, "\r\n",
    "Content-Length: ", content.length, "\r\n",
    "\r\n",
    content,
  ].join('');
}

以下是请求:

Request URL:https://www.googleapis.com/upload/drive/v2/files?uploadType=multipart
Request Method:OPTIONS

以下是回应:

Status Code:405 Method Not Allowed
cache-control:no-cache, no-store, must-revalidate
content-length:0
content-type:text/html; charset=UTF-8
date:Mon, 23 Jul 2012 22:41:29 GMT
expires:Fri, 01 Jan 1990 00:00:00 GMT
pragma:no-cache
server:HTTP Upload Server Built on Jul 17 2012 16:15:04 (1342566904)
status:405 Method Not Allowed
version:HTTP/1.1

没有响应,因为 Chrome 会收到该选项请求的 405 错误。没有开机自检,因为Chrome无法继续,因为它的“选项”请求因405而失败,因此它会在控制台中打印此错误:

XMLHttpRequest cannot load https://www.googleapis.com/upload/drive/v2/files?uploadType=multipart. Origin https://leisurestorage.appspot.com is not allowed by Access-Control-Allow-Origin.

共有3个答案

尉迟景福
2023-03-14

这个答案(实际上问题本身)现在是多余的,因为史蒂夫·巴兹尔(Steve Bazyl)证实了完整的CORS支持。

使用@Nivco帮助的工作代码以及详细说明:

下面是这项技术的完整测试的工作代码。要使用这个,你需要做两页。第一个页面验证并启动第二个页面,这是您实际的应用程序。为了能够访问Google Drive API来上传文件,您需要注册一个应用程序,如下所述。

您的第一页将使用OAuth,在此Stackoverflow答案中进行了描述。它使用如下所示的片段调用您的应用程序

#access_token=ya29.AHES6ZSb4M4ju8U_X_zgFrz_MD2RsjrQu5V05HjsBtrCl0nh2SrnaA&token_type=Bearer&expires_in=3600

在JavaScript中,您可以使用location.hash访问该片段。保存值后,最好立即将location.hash设置为空字符串,这样它就不会显示在浏览器的位置栏中。您的应用程序需要在其CORS请求以及对上传API的代理(非CORS)请求中使用片段中access_token的值。这是一个示例启动页面,它实际上只是OAuth示例中代码的一个版本:

<html>
  <body>
    <a href="javascript:poptastic('https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.file&client_id=270759921607.apps.googleusercontent.com&redirect_uri=https://leisurestorage.appspot.com&response_type=token');">Authorize Leisure Storage</a><br>
    <script>
      function poptastic(url) {
        var newWindow = window.open(url, 'name', 'height=600,width=450');
        if (window.focus) {
          newWindow.focus();
        }
      }
    </script>
  </body>
</html>

下面是一个示例应用,它使用谷歌的 JavaScript 客户端库将 a\na\b\n 上传到您的谷歌驱动器中名为 LeisureUpload 的文件。没有必要使用任何一种无效方法,因为它直接在调用中使用具有授权标头的原始 gapi.client.request() 调用,就像使用 CORS 的 xmlHttpRequest() 一样:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Leisure</title>
    <script type="text/javascript">
    var hash = location.hash.substring(1).split('&');
    location.hash = '';
    var params = {};

    for (var i = 0; i < hash.length; i++) {
        var p = hash[i].split('=');

        params[p[0]] = p[1];
    }
    function gapiClientLoaded() {/* do nothing */}
    function uploadTestFile() {
        var json = JSON.stringify({
            mimeType: 'text/plain',
            title: 'leisureUpload',
        });
        var xhr = new XMLHttpRequest();

        gapi.client.request({
            'path': '/upload/drive/v1/files',
            'method': 'POST',
            'params': {'uploadType': 'multipart'},
            'headers': {
                'Content-Type': 'multipart/mixed; boundary="END_OF_PART"',
                'Authorization': 'Bearer ' + params.access_token,
            },
            'body': [
                mimePart("END_OF_PART", "application/json", json),
                mimePart("END_OF_PART", "text/plain", "a\nb\n"),
                "\r\n--END_OF_PART--\r\n",
            ].join('')
        }).execute(function(file) {
            document.getElementById("result").innerHTML = "Uploaded file: " + file;
        });
    }
    function mimePart(boundary, mimeType, content) {
        return [
            "\r\n--", boundary, "\r\n",
            "Content-Type: ", mimeType, "\r\n",
            "Content-Length: ", content.length, "\r\n",
            "\r\n",
            content,
        ].join('');
    }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=gapiClientLoaded"></script>
  </head>
  <body>
    <h1>Welcome to Leisure!</h1>
    <button onclick="uploadTestFile()">Upload Test File</button><br>
    <pre id="result"></pre>
  </body>
</html>
李俭
2023-03-14

CORS现已完全启用。看见https://github.com/googledrive/cors-upload-sample有关如何使用vanilla JS进行可恢复上传的示例。

越嘉茂
2023-03-14

您似乎是对的,上传APIendpoint似乎不支持CORS请求,而其他endpoint确实支持它(抱歉没有彻底测试)。这是一个错误,我们已经让我们的工程团队知道了这个问题。

同时,似乎唯一的解决方法是使用Javascript客户端库并利用它使用的iframe代理,如使用JavaScript的Google Drive授权中所述

谢谢你提起这个!

 类似资料:
  • 不确定这里的API下发生了什么,但从我的调试输出来看,一切都正常。它将ID传递给有效文件等等。有没有办法在Google SDK中启用调试输出? 在HTTP错误之前,我看到了几个警告: 代码如下: 好的,这个函数是通过文件类(本地或远程)调用的。在这种情况下,是远程文件类调用此函数,提供对本地文件类上载程序(media\u upload)的引用: 所以在远程文件类中,我实现了这个方法。Drive()

  • Google drive upload Google drive upload is a collection of shell scripts runnable on all POSIX compatible shells ( sh / ksh / dash / bash / zsh / etc ). It utilizes google drive api v3 and google OAut

  • 20.CORS 支持 20.1简介 出于安全考虑,浏览器禁止AJAX调用驻留在当前来源之外的资源。 例如,当您在一个标签中检查您的银行帐户时,您可以在另一个标签中打开evil.com网站。 evil.com的脚本不能使用您的凭据向您的银行API发出AJAX请求(例如,从您的帐户中提款)! Cross-origin resource sharing(CORS) 是大多数浏览器实现的W3C规范,允许您

  • 我试图在Spring Boot应用程序中启用CORS支持,但没有成功。我研究了很多解决方案,但似乎都不适合我。 当我尝试从Angular应用程序呼叫Java后端时,我在chrome中看到了错误: CORS策略阻止从源http://localhost:4200在http://localhost:8080/..处访问XMLHttpRequest:对预检请求的响应不通过权限改造检查:不允许对预检请求进行

  • 我正在亚马逊EMR上运行Apache齐柏林飞艇0.8.0。最近spark解释器开始无法提取库依赖项。这是因为齐柏林飞艇。口译译员dep.mvnRepo配置参数设置为http://repo1.maven.org/maven2/maven repo最近停止支持http,如下所述:https://support.sonatype.com/hc/en-us/articles/360041287334 根据