How to enable CORS in Sharepoint Online

Question

I am trying to implement share point file browser in my react application. Using microsoft/file-browser for this ans code as follows. But getting the xxx... from origin 'http://localhost:3000' has been blocked by CORS policy

Any ideas how can I enable CORS for this

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;

Answer 1

As far as i can tell the CORS error does not occur because of SharePoint, but because of your Browser. The problem here is that you are trying to load resources from xxx.sharepoint.com to localhost (which per default is never added as accepted in CORS)

So one solution would be to use a CORS-unsensitive browser. This could be the following:

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

This snippet starts your Google Chrome without "Web Security" (includes CORS) using the User Data Directory "C:\tmp".

Remember that this workaround only works for development. In production you should not use localhost...

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

Answer 2

CORS is supported (or not) by the web application you are accessing. Previous versions of SharePoint had little or no CORS support.

SharePoint 2016 and above require you to use OAuth on all CORS calls. This can be done with a low/high trust add-in token, or an AAD application token. Any valid OAuth token recognized by SharePoint will work. This is a broad topic, but you can read up on add-in authentication here- Authorization and authentication of SharePoint Add-ins

In previous versions of SharePoint (2013 and before) you were able to use URL re-write rules or response headers in IIS to fake CORS support that was lacking in SharePoint at the time. Now that it supports it, you can't fake it, and it requires authentication.

More information here- Fixing issue in making cross domain ajax call to SharePoint rest

Answer 3

Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs).

Your production server must be CORS-enabled in order to handle cross-domain Ajax requests in web applications from a different domain. But if you just need to bypass it for development, try using Allow CORS: Access-Control-Allow-Origin chrome extension which let's you enable/disable CORS checking.