Using the OneDrive API in JavaScript apps (CORS support)
The OneDrive API supports HTTP access control (CORS) to allow single page JavaScript applications to use the OneDrive API through the common XMLHttpRequest pattern.
You can read more about CORS (Cross-Origin Resource Sharing) on Wikipedia or the W3C CORS Wiki.
Sample code
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.
You can try the OneDrive explorer sample app or view the source code.
Example request
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();
Downloading OneDrive files in JavaScript apps
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.
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
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
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://..."
}
You can then make an XMLHttpRequest for the URL provided in @microsoft.graph.downloadUrl
to retrieve the file.
Feedback
https://aka.ms/ContentUserFeedback.
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see:Submit and view feedback for