在 JavaScript 应用中使用 OneDrive API(CORS 支持)Using the OneDrive API in JavaScript apps (CORS support)

OneDrive API 支持 HTTP 访问控制 (CORS),这样单页 JavaScript 应用便可以通过常见 XMLHttpRequest 模式使用 OneDrive API。The OneDrive API supports HTTP access control (CORS) to allow single page JavaScript applications to use the OneDrive API through the common XMLHttpRequest pattern.

可以访问维基百科W3C CORS Wiki,详细了解 CORS(跨源资源共享)。You can read more about CORS (Cross-Origin Resource Sharing) on Wikipedia or the W3C CORS Wiki.

示例代码Sample code

OneDrive 资源管理器 JS 示例应用展示了如何在 JavaScript 应用中使用 OneDrive API。 此示例展示了如何在 JavaScript 中浏览和导航用户的 OneDrive 内容。The OneDrive Explorer JS sample app demonstrates how to use the OneDrive API from a JavaScript app. This sample shows you how to browse and navigate the contents of a user's OneDrive in JavaScript.

可以试用 OneDrive 资源管理器示例应用,也可以查看源代码You can try the OneDrive explorer sample app or view the source code.

示例请求Example request

此示例创建 CORS 请求,以便向 /drive/root/children 终结点发送 GET 请求,从而返回用户的 OneDrive 项。 此示例是使用 test-cors.org 生成。This example creates a CORS request that returns the items from a user's OneDrive, by sending a GET request to the /drive/root/children endpoint. The example was generated using test-cors.org.

var createCORSRequest = function(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // Most browsers.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // IE8 & IE9
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
};

var url = 'https://graph.microsoft.com/v1.0/me/drive/root/children';
var method = 'GET';
var xhr = createCORSRequest(method, url);

xhr.onload = function() {
  // Success code goes here.
};

xhr.onerror = function() {
  // Error code goes here.
};

xhr.setRequestHeader('Authorization', 'Bearer access_token_value');
xhr.send();

在 JavaScript 应用中下载 OneDrive 文件Downloading OneDrive files in JavaScript apps

不能使用 /content API 在 JavaScript 应用中下载 OneDrive 文件,因为这样会生成 302 重定向作为响应。 如果必须执行 CORS 302(例如,在提供_授权_标头时),明确禁止使用 **** 重定向。To download files from OneDrive in a JavaScript app you cannot use the /content API, since this responds with a 302 redirect. A 302 redirect is explicitly prohibited when a CORS preflight is required, such as when providing the Authorization header.

应用需要改为选择 @microsoft.graph.downloadUrl 属性,这将返回 /content 重定向到的相同 URL。 然后,便可以使用 XMLHttpRequest 直接向此 URL 发出请求。 由于这些 URL 已预先验证,因此可以在没有 CORS 预检请求的情况下检索它们。Instead, your app needs to select the @microsoft.graph.downloadUrl property, which returns the same URL that /content would have redirected to. This URL can then be requested directly using XMLHttpRequest. Because these URLs are pre-authenticated they can be retrieved without a CORS preflight request.

示例Example

若要检索文件的下载 URL,请先发出包含 @microsoft.graph.downloadUrl 属性的请求:To retrieve the download URL for a file, first make a request that includes the @microsoft.graph.downloadUrl property:

GET /drive/items/{item-id}?select=id,@microsoft.graph.downloadUrl

这会返回文件的 ID 和下载 URL:This returns the id and download URL for a file:

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": "12319191!11919",
  "@microsoft.graph.downloadUrl": "https://..."
}

然后,可以使用 XMLHttpRequest 向 @microsoft.graph.downloadUrl 中提供的 URL 发出请求,从而检索文件。You can then make an XMLHttpRequest for the URL provided in @microsoft.graph.downloadUrl to retrieve the file.