Download onedrive cors in javascript

Question

I am trying to process onedrive files in client javascript, but first I need to use XMLHttpRequest to load the file. Onedrive supports cors for a large number of operations, but the following problem occurs for loading a file in javascript:

As mentioned here: onedrive rest api manual

I can send a request:

GET https://apis.live.net/v5.0/FILE_ID/content?access_token=ACCESS_TOKEN

and it will respond with a location header redirecting the browser to the file. The problem is that when I send these requests via XHR, the browser always sends the Origin header with the request. For the first request described above, onedrive also responds with the Access-Control-Allow-Origin: * header, so the request is allowed in the browser. However, when the browser is redirected to the actual file location, this resource does not have an Access-Control-Allow-Origin header, so the browser rejects the XHR request (chrome sends the Origin header set to null for the redirect request).

I also tried to get the location, but not redirecting automatically, and then sending another XHR request, this will set the source header to the domain of my site, but the result will be the same.

As I mentioned at the beginning, I need to process the data in javascript, so I am not asking about how to download onedrive files to the hard drive. I need javascript data to be available on a webpage.

I know that I can use server-side programming to get the file data for me and then send it to the client, but for my application this is not an option (at least this is not what I am asking for at the moment).

If there is no way to do this, does anyone have an idea why they will implement their api in this way? To allow javascript to get the location through cors and redirect, but not include the cors header for the redirected resource. Why not just deny cors in the first place? This is mistake?

Answer 1

This is not an answer, I can not comment yet.

A new API for onedrive was released last week. http://onedrive.imtqy.com/index.htm

Unfortunately, this will not solve the problem.

https://api.onedrive.com/v1.0/drive/root:{path and name}:/content?access_token={token} 

It will still be redirected to the original source somewhere at https://X.files.1drv.com/.X.

which will not contain Access-Control-Allow-Origin headers. The same goes for Url "@content.downloadUrl" in the JSON response.

I hope that Microsoft will solve this problem in the near future, because the API is currently very limited, because you cannot process the contents of a file from onedrive using html5 applications. In addition to the usual file browser.

The only solution that I see at the moment will be a chrome application that can handle Url without CORS. see https://developer.chrome.com/apps/angular_framework

Answer 2

The answer, as far as I can tell, is that content loading cannot be performed solely by JavaScript in the browser. Why would they do that? You would have to ask them, but I would have guessed either about the error, or about some unspecified "security problems." For what it's worth, they seem to believe that downloading the content meets the CORS requirements in the documentation: https://dev.onedrive.com/misc/working-with-cors.htm :

To download files from OneDrive in a JavaScript application, you cannot use the / content API, as this responds with a 302 redirect. Redirecting 302 is explicitly prohibited when a preliminary CORS flight is required, for example, when providing an authorization header.

Instead, your application needs to select the @ content.downloadUrl property, which returns the same URL that / content was redirected to. This URL can then be requested directly using XMLHttpRequest. Because these URLs are pre-authenticated, they can be received without a CORS preflight request.

However, as far as I know, they are mistaken. Just because you don’t need a pre-flight request does not mean that the answer is CORS compliant. In response, you still need the Access-Control-Allow-Origin header.

Interesting for someone, it's still a problem in the new graphical API (which is essentially the OneDrive API proxy, as I understand it). The same basic problem is still present - you can get the download URL from your elements, but this URL points to a non-CORS-compatible resource, so it won’t do you much good.

I have an active problem with Microsoft here about this issue. There was some answer to my problem (I made them expose the download URL via the graphics API), but I'm still waiting to see if they come up with a real solution for loading content from JavaScript.

If I get a solution or a real answer to this problem, I will try to report it so that others can get a real answer to the link in the future.

Answer 3

The box does the same for download requests. I did not find a way to solve this problem without involving a server, because the browser will not allow your program to access the contents of the 302 redirect response. For security reasons, I’m not sure browsers will necessarily execute redirect requests without allowing user intervention.

The way we finally worked on it was

• The browser application sends a GET request to the server, which redirects it to the cloud provider (box / ondrive).
• then DO NOT execute the 302 redirect response from Box or OneDrive
• Instead, the server returns to the browser application, the contents of the location field in the response header 302, which contains the download URL
• javascript in the browser application then downloads the file using the url.

Answer 4

Now you can simply use the "@ content.downloadUrl" property of the element in your GET request. Then there is no redirection.

From https://dev.onedrive.com/items/download.htm :

Returns a response 302 The response found is redirected to a pre-authenticated URL to download the file. This is the same URL accessible through the @ content.downloadUrl property for the item.