如何使用 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 错误。

我的应用程序 headers 中有 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 header.

当您从源 A 向源 B (https://graph.microsoft.com) 上的某个端点发送 CORS 请求时，响应允许源 A 但结果为 cross-origin 重定向到原点 C (https://foozlecorporation-my.sharepoint.com) 上的某个端点，浏览器执行新的 CORS access-control 检查原点 C 上的原点 A。如果原点 C 没有为 CORS 配置或没有'允许来源 A，您的整体 CORS 请求将失败。

可能的解决方案

一个解决方案是从后端而不是前端调用 https://graph.microsoft.com；那样的话，因为 CORS 不适用于 non-browser 用户代理，你就可以回避这个问题。

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

How can I download a file from OneDrive into Angular application using Typescript?

angular

typescript

safari

cors

sharepoint-rest-api

问题

可能的解决方案