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=''

      />
    );
  }
}

export default App;

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.'

      />
    );
  }
}

export default App;

• javascript
• reactjs
• sharepoint
• cors
• microsoft-graph-files

• Sharepoint is trouble. I am using Angular and it has a feature called proxyconfig, In react if you dont have one use proxy from webpack dev server. I point to Sharepoint site and works hassle free. If you still cant do that have a proxy server up and proxy requests so no OPTIONS pre flight request or any other cors issue will bug you – Joy Biswas Commented Sep 11, 2019 at 9:50
• I have CORS issue with ADFS. I didn't like to go proxy way but I implemented custom endpoints that are proxying the requests to ADFS. – Vlad DX Commented Sep 16, 2019 at 10:41

3 Answers 3

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. 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./2014/08/bypass-cors-errors-testing-apis-locally/

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

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.