更新:这是Google云端硬盘中的错误,CORS没有上传的URI启用。 @Nivco指着我周围的工作与谷歌的客户端库,使用iframe和代理(不CORS)。 我把(测试)工作代码在底部,有一个详细的解释和说明。 请参阅答案,下面的例子。
通过API插入文件到谷歌驱动器 ,并使用JavaScript谷歌驱动器的授权说,上传端点支持CORS,但我一直无法使用它们。 我可以得到授权,并插入一个空文件,使用文件:插入 ,但我不能上传内容到它-我得到一个405(不允许的方法)错误,当我使用https://www.googleapis.com/upload /驱动器/ V2 /文件 ,当我使用任何一种在插入文件堆栈溢出后例子中的两种技术。
有没有可能是CORS工作了v1和v2的为尚未启用?
编辑:顺便说一下,405错误是对Chrome是使OPTIONS请求。
编辑:这是从我的尝试之一的代码:
在我目前的代码,我想强调的是,我能够进行身份验证和列表文件。 我只是无法上传数据到一个文件中。
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错误对于OPTIONS请求。 没有发布,因为浏览器无法继续,因为它的OPTIONS请求有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.
看来你是对的,上传API端点似乎不支持CORS请求,而其他终端做支持(对于没有彻底测试抱歉)。 这是一个错误,我们必须让我们的工程团队了解的问题。
在平均时间似乎唯一的解决方法是使用JavaScript客户端库,并采取在描述它会使用iframe代理的优势, 使用JavaScript谷歌驱动器的授权
谢谢你提出这个问题!
CORS现已全面启用。 见https://github.com/googledrive/cors-upload-sample对于如何做到断点续传与香草JS的例子。
这个答案(实际上这个问题本身)现在冗余给予了充分的支持CORS由史蒂夫Bazyl证实
工作代码,使用@ Nivco的帮助下,有详细的解释和说明:
下面是该技术的全面测试工作代码。 要使用此功能,你需要做两页。 第一页验证并启动第二页,这是您的实际应用。 为了能够访问谷歌的云端硬盘API上传文件,你需要注册一个应用程序,这是描述在这里 。
您的第一个页面将使用OAuth,这是在描述这个答案#1 。 它调用看起来像这样一个片段您的应用程序:
#access_token=ya29.AHES6ZSb4M4ju8U_X_zgFrz_MD2RsjrQu5V05HjsBtrCl0nh2SrnaA&token_type=Bearer&expires_in=3600
在JavaScript中,您可以访问片段用location.hash
。 保存值后,它的设置是一个好主意location.hash
为空字符串向右走,所以它不会在浏览器的地址栏中显示出来。 您的应用需要在其CORS请求,并在代理(非CORS)请求上传API使用的的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>
下面是上传一个示例应用程序a\na\b\n
到一个名为leisureUpload
在你的Google云端硬盘,使用谷歌的客户端JavaScript库。 有没有必要使用任何的gapi.auth方法,因为它使用了原始gapi.client.request()与Authorization头直接在电话呼叫,就像它会使用XMLHttpRequest的CORS():
<!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>