如何使用Typescript将文件从OneDrive下载到Angular应用程序

Question

我有一个Angular应用程序，它正在使用OneDrive/Sharepoint存储它创建的文件。身份验证工作正常，我可以成功保存我的文件。我在下载使用Angular HttpClient创建和存储的文件时遇到了问题。

我的代码如下：

export class MicrosoftService {
private graphUri = 'https://graph.microsoft.com/v1.0';
constructor(private http: HttpClient) {}
public loadFile(id: string, next: (saved: string) => void): void {

this.http.get(this.graphUri + '/me/drive/items/' + id + '/content', { headers: this.getOAuthHeader() })
.subscribe((response: any) => {
console.log(response.toString());
next(response.toString());
});
}
getOAuthHeader(): HttpHeaders {
// a bunch of stuff that generates the OAuth headers, definitely works
}
}

很明显，当我能收到回复时，我会对它做一些其他的事情。

问题是，当GET请求被触发时，它会正确地向图发出请求，然后返回302重定向到https://foozlecorporation-my.sharepoint.com/drive/path/_layouts/15/download.aspx?UniqueId=a-bunch-of-url-params——这也是正确的，我可以从REST客户端下载内容，但在浏览器(当前使用Safari(中，重定向会引发Browser cannot load [...url...] due to access control checks错误。

我的应用程序头中有Access-Control-Allow-Origin: *，这大概就是为什么我可以首先使用Graph，但Sharepoint响应不包括Access-Control-Allow-Origin。我还需要做什么？

Answer 1

问题

您写道，端点https://foozlecorporation-my.sharepoint.com/drive/path/_layouts/15/download.aspx?UniqueId=a-bunch-of-url-params不使用任何Access-Control-Allow-Origin标头进行响应。

当您从原点A向原点B(https://graph.microsoft.com(上的某个端点发送CORS请求，并且响应允许原点A，但导致跨原点重定向到原点C(https://foozlecorporation-my.sharepoint.com(上的某些端点时，浏览器将对原点C上的原点A执行新的CORS访问控制检查。如果原点C未配置CORS或不允许原点A访问，则您的整个CORS请求将失败。

可能的解决方案

一种解决方案是从后端而不是前端调用https://graph.microsoft.com；这样，因为CORS不适用于非浏览器用户代理，所以您可以回避这个问题。