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

[amalwayscharan]

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 

[#2 · Accepted 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?

[#3]

Thank you @paulpascha, 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

[#4]

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