如何使用 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 请求被触发时，它会正确地发出图形请求，然后returns a 302 redirect 到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

问题

You write 端点 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 不适用于非浏览器用户代理，您就可以回避这个问题。