SOLVED

SharePoint Office 365 : CORS issue, REST API call to other application from SharePoint Online

%3CLINGO-SUB%20id%3D%22lingo-sub-777566%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Office%20365%20%3A%20CORS%20issue%2C%20REST%20API%20call%20to%20other%20application%20from%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-777566%22%20slang%3D%22en-US%22%3EThis%20is%20what%20I%20heard%20back%20from%20MS%20Support%20%3A%20In%20case%20of%20SharePoint%20Online%2C%20we%20need%20to%20use%20OAuth%20to%20get%20data%20from%20your%20custom%20api.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20do%20not%20know%20how%20to%20achieve%20this%2C%20any%20help%20would%20be%20greatly%20appreciated.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-777557%22%20slang%3D%22en-US%22%3ESharePoint%20Office%20365%20%3A%20CORS%20issue%2C%20REST%20API%20call%20to%20other%20application%20from%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-777557%22%20slang%3D%22en-US%22%3E%3CP%3EWhen%20trying%20to%20access%203rd%20party%20REST%20API%20(EasyVista)%20from%20SharePoint%20web%20page%2C%20it%20shows%20No%20'Access-Control-Allow-Origin'%20header%20is%20present%20on%20the%20requested%20resource.%3C%2FP%3E%3CP%3EI've%20tried%20passing%20username%20and%20password%20in%20jQuery%20headers%2C%20I%20checked%20the%20access-that%20wasn't%20the%20issue.%20SO%2C%20I%20checked%20the%20developers%20tools%20to%20find%20that%20CORS%20is%20the%20issue.%3C%2FP%3E%3CPRE%3E%3CSPAN%20class%3D%22kwd%22%3Efunction%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20loadListItems%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E()%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%7B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Evar%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20oDataUrl%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E%22%3COTHER%20applicaiton%3D%22%22%20rest%3D%22%22%20url%3D%22%22%3E%22%3C%2FOTHER%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Evar%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20username%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E%22restapi%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22kwd%22%3Evar%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20password%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3D%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E%22xxxxx%22%3C%2FSPAN%3E%0A%20%20%20%20%20%20%3CSPAN%20class%3D%22com%22%3E%2F%2F%20%20console.log(_spPageContextInfo)%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%24%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E.%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3Eajax%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%7B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20oDataUrl%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E%22GET%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataType%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E%22json%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20crossDomain%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22kwd%22%3Etrue%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20headers%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%7B%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22str%22%3E%22Authorization%22%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E'Basic'%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%2B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20btoa%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E(%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3Eusername%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2B%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E%22%3A%22%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22pun%22%3E%2B%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20password%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E)%2C%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22str%22%3E%22accept%22%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%20%3CSPAN%20class%3D%22str%22%3E%22application%2Fjson%3Bodata%3Dverbose%22%3C%2FSPAN%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSPAN%20class%3D%22pun%22%3E%7D%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20successFunction%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%2C%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20error%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%3A%3C%2FSPAN%3E%3CSPAN%20class%3D%22pln%22%3E%20errorFunction%0A%20%20%20%20%20%20%20%20%3C%2FSPAN%3E%3CSPAN%20class%3D%22pun%22%3E%7D)%3B%3C%2FSPAN%3E%0A%3CSPAN%20class%3D%22pun%22%3E%7D%3C%2FSPAN%3E%3C%2FPRE%3E%3CP%3EHere%20is%20the%20complete%20error%20message%20%3A%20Access%20to%20XMLHttpRequest%20at%20''%20from%20origin%20''%20has%20been%20blocked%20by%20CORS%20policy%3A%20Response%20to%20preflight%20request%20doesn't%20pass%20access%20control%20check%3A%20No%20'Access-Control-Allow-Origin'%20header%20is%20present%20on%20the%20requested%20resource.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThis%20is%20what%20I%20heard%20back%20from%20MS%20Support%20%3A%20In%20case%20of%20SharePoint%20Online%2C%20we%20need%20to%20use%20OAuth%20to%20get%20data%20from%20your%20custom%20api.%3C%2FSPAN%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CSPAN%3EI%20do%20not%20know%20how%20to%20achieve%20this%2C%20any%20help%20would%20be%20greatly%20appreciated.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20tried%20many%20other%20articles%2C%20I%20couldn't%20find%20a%20proper%20solution%2C%20any%20guidance%20would%20be%20much%20appreciated.%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F179646%22%20target%3D%22_blank%22%3E%40SharePoint%20dev%3C%2FA%3E%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F292426%22%20target%3D%22_blank%22%3E%40MTSharePoint%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-778482%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Office%20365%20%3A%20CORS%20issue%2C%20REST%20API%20call%20to%20other%20application%20from%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-778482%22%20slang%3D%22en-US%22%3ECORS%20policies%20need%20to%20be%20configured%20on%20the%20EasyVista%20side%20to%20allow%20calls%20from%20JavaScript%20hosted%20in%20your%20SharePoint%20site%20which%20is%20in%20another%20domain.%20I%20don't%20know%20EasyVista%20and%20the%20options%20it%20provides%20for%20configuring%20CORS%2C%20maybe%20it%20provides%20support%20for%20JSONP%20as%20an%20alternative.%3CBR%20%2F%3E%3CBR%20%2F%3EAlternatively%20you%20could%20develop%20your%20own%20Web%20API%20as%20a%20wrapper%20around%20the%20EasyVista%20service%20and%20configure%20CORS%20for%20your%20Web%20API.%20Server-side%20calls%20between%20your%20Web%20API%20and%20EasyVista%20won't%20be%20an%20issue.%3CBR%20%2F%3E%3CBR%20%2F%3EDoes%20this%20make%20sense%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-779795%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Office%20365%20%3A%20CORS%20issue%2C%20REST%20API%20call%20to%20other%20application%20from%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-779795%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1803%22%20target%3D%22_blank%22%3E%40Paul%20Pascha%3C%2FA%3E%2C%26nbsp%3Bfor%20your%20reply.%20I%20don't%20think%20EasyVista%20has%20a%20way%20to%20enable%20CORS%20on%20it's%20end.%20I%20checked%20their%20documentation%2C%20it%20doesn't%20mentioned%20anything%20related%20to%20CORS.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20like%20you%20alternative%20suggestion%2C%20a%20quick%20question%20here%20%3A%20Is%20this%20the%20only%20way%20to%20access%203rd%20party%20API%20with%20CORS%20issue%3F%20Or%20should%20I%20research%20on%20SPFX%2FOAuth%20%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPardon%20my%20ignorance%20if%20any%2C%20I'm%20still%20learning%20the%20SP%20framework%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-787737%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Office%20365%20%3A%20CORS%20issue%2C%20REST%20API%20call%20to%20other%20application%20from%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-787737%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F383756%22%20target%3D%22_blank%22%3E%40amalwayscharan%3C%2FA%3E%26nbsp%3BTry%20using%20the%20SPHttpClient%20to%20make%20calls%20to%20the%20API%20(%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%20class%3D%22token%20punctuation%22%3E.%3C%2FSPAN%3E%3CSPAN%3EspHttpClient)%3C%2FSPAN%3E.%20This%20is%20setup%20to%20send%20CORS%20friendly%20calls.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHave%20a%20look%20here%20for%20an%20overview%20of%20making%20calls%20to%20APIs%20with%20CORS%20setup%20-%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftahoeninjas.blog%2F2019%2F02%2F05%2Fgetting-around-cors-issues-in-spfx-with-sphttpclient%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ftahoeninjas.blog%2F2019%2F02%2F05%2Fgetting-around-cors-issues-in-spfx-with-sphttpclient%2F%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

When trying to access 3rd party REST API (EasyVista) from SharePoint web page, it shows No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried passing username and password in jQuery headers, I checked the access-that wasn't the issue. SO, I checked the developers tools to find that CORS is the issue.

function loadListItems() {
        var oDataUrl = "<Other applicaiton REST URL>";
        var username = "restapi";
        var password = "xxxxx"
      //  console.log(_spPageContextInfo);        $.ajax({                url: oDataUrl,                type: "GET",                dataType: "json",                crossDomain: true,                headers: {
                        "Authorization" : 'Basic' + btoa(username + ":" + password),
                        "accept": "application/json;odata=verbose"
                },                success: successFunction,                error: errorFunction
        });
}

Here is the complete error message : Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

This is what I heard back from MS Support : In case of SharePoint Online, we need to use OAuth to get data from your custom api.

I do not know how to achieve this, any help would be greatly appreciated.

 

I've tried many other articles, I couldn't find a proper solution, any guidance would be much appreciated. @SharePoint dev @MTSharePoint 

3 Replies
best response confirmed by Beau Cameron (MVP)
Solution
CORS policies need to be configured on the EasyVista side to allow calls from JavaScript hosted in your SharePoint site which is in another domain. I don't know EasyVista and the options it provides for configuring CORS, maybe it provides support for JSONP as an alternative.

Alternatively you could develop your own Web API as a wrapper around the EasyVista service and configure CORS for your Web API. Server-side calls between your Web API and EasyVista won't be an issue.

Does this make sense?

Thank you @Paul Pascha, for your reply. I don't think EasyVista has a way to enable CORS on it's end. I checked their documentation, it doesn't mentioned anything related to CORS. 

 

I like you alternative suggestion, a quick question here : Is this the only way to access 3rd party API with CORS issue? Or should I research on SPFX/OAuth ? 

 

Pardon my ignorance if any, I'm still learning the SP framework

@amalwayscharan Try using the SPHttpClient to make calls to the API (context.spHttpClient) . This is setup to send CORS friendly calls.

 

Have a look here for an overview of making calls to APIs with CORS setup - https://tahoeninjas.blog/2019/02/05/getting-around-cors-issues-in-spfx-with-sphttpclient/