如何在Sharepoint Online中启用CORS

Question

我正在尝试在我的React应用程序中实现SharePoint文件浏览器。使用microsoft/file-browser进行此操作，代码如下。但是出现了xxx... from origin 'http://localhost:3000' has been blocked by CORS policy的错误。

有什么想法可以启用CORS吗？

import * as React from "react";

import { GraphFileBrowser } from '@microsoft/file-browser';

class App extends React.Component {


  getAuthenticationToken() {
    return new Promise<string>(resolve => {
      resolve(
        "VALID TOKEN"
      );
    });
  }

  render() {
    return (
      <GraphFileBrowser
        getAuthenticationToken={this.getAuthenticationToken}
        onSuccess={(selectedKeys: any[]) => console.log(selectedKeys)}
        onCancel={(err: Error) => console.log(err.message)}
        endpoint='https://XXX.sharepoint.com'

      />
    );
  }
}

export default App;

- huMpty duMpty

---

Sharepoint很麻烦。我正在使用Angular，它有一个名为proxyconfig的功能，在React中如果没有这个功能，可以使用webpack dev server的代理。我指向Sharepoint站点并且无需麻烦即可工作。如果你仍然做不到，可以启动一个代理服务器并代理请求，这样就不会出现任何OPTIONS预检请求或其他跨域问题困扰你了。 - joyBlanks

我在使用ADFS时遇到了CORS问题。我不想使用代理方式，但我实现了自定义端点来代理请求到ADFS。 - Vlad DX

Answer 1

据我所知，CORS错误并非由SharePoint引起，而是由您的浏览器引起的。问题在于您试图从xxx.sharepoint.com加载资源到本地主机（默认情况下，本地主机不会被添加为CORS接受的地址）。

因此，一种解决方案是使用一个对CORS不敏感的浏览器。以下是可能的选择：

cd "C:\Program Files (x86)\Google\Chrome\Application"
chrome.exe --disable-web-security --user-data-dir="C:\tmp"

这段代码可以在Google Chrome中启动"Web Security"（包括CORS），并使用用户数据目录"C:\tmp"。请记住，这个解决方法只适用于开发环境。在生产环境中，请不要使用localhost...

https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/

- DavidVollmers

---

我之前在一个SharePoint和Angular组合的项目中做了完全相同的事情，而且运行得很好。 - norbitrial

Answer 2

您正在访问的Web应用程序支持（或不支持）CORS。以前的SharePoint版本几乎没有CORS支持。

SharePoint 2016及以上版本要求您在所有CORS调用中使用OAuth。这可以通过低/高信任添加令牌或AAD应用程序令牌完成。SharePoint识别的任何有效OAuth令牌都可以使用。这是一个广泛的主题，但您可以在此处阅读有关添加身份验证的信息 - SharePoint Add-ins的授权和身份验证

在以前的SharePoint版本（2013年及之前），您可以使用IIS中的URL重写规则或响应标头来伪造缺少的CORS支持。现在它支持它，你不能假装它，而且需要身份验证。

更多信息在此处- 修复在向SharePoint rest进行跨域Ajax调用时出现的问题

- Westley

Answer 3

现代浏览器默认情况下（在JavaScript API中），会阻止跨域资源共享。

您的生产服务器必须启用CORS，以处理来自不同域的Web应用程序中的跨域Ajax请求。但是，如果您只需要在开发过程中绕过它，请尝试使用Allow CORS: Access-Control-Allow-Origin Chrome扩展程序，该扩展程序可以让您启用/禁用CORS检查。

- Mohsen Taleb

---

这里的生产服务器由微软控制，因为这是有关SharePoint Online的问题。SPO站点始终是https://<your-tenant-name>.sharepoint.com域的子网站。 - TylerH