SOLVED
Home

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%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
Highlighted
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?
Highlighted

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

Highlighted

@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/

Related Conversations
Talk with Project Engineers!
jackieduong in Project on
0 Replies
Using comments in office documents in teams
eddyyeah in Microsoft Teams on
2 Replies
Bug - owner can't manage tags
Konrad92 in Microsoft Teams on
0 Replies
InvalidOrMissingClaims
Gauddi in Yammer Developer on
0 Replies