Workday integration in sharepoint online

In our organization we recently got a task like integration with workday from sharepoint online using spfx app. To elaborate more on this we need to show workday inbox items in sharepoint online site using spfx app. we have built the app and app is working fine if we give manual bearer token, but when we hit workday authorize endpoint url. we are getting CORS issue "Access to fetch at '/authorize?response_type=token&redirect_uri=https%3A%2F%2Fbroadsetgroup.sharepoint.com%2F_layouts%2F15%2Fworkbench.aspx&client_id=NzM5ODJhMWEtNTM3NC00MzIwLWE1NjQtZWNjYzI5MGQ5ZDVm' from origin 'https://broadsetgroup.sharepoint.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.". we have enabled origin for our sharepoint domain in workday client api app.

Could you let me know your suggestions on this.

The server that hosts the resource needs to have CORS enabled. What you can do on the client side (and probably what you are thinking of) is set the mode of fetch to CORS (although this is the default setting I believe):

fetch(request, {mode: 'cors'});

However this still requires the server to enable CORS as well, and allow your domain to request the resource.

Check out the CORS documentation, and this awesome Udacity video explaining the Same Origin Policy.

You can also use no-cors mode on the client side, but this will just give you an opaque response (you can't read the body, but the response can still be cached by a service worker or consumed by some API's, like ):

fetch(request, {mode: 'no-cors'}) .then(function(response) { console.log(response); }).catch(function(error) { console.log('Request failed', error) });

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Thuyavan Ganesan7y ago
The server that hosts the resource needs to have CORS enabled. What you can do on the client side (and probably what you are thinking of) is set the mode of fetch to CORS (although this is the default setting I believe):

fetch(request, {mode: 'cors'});

However this still requires the server to enable CORS as well, and allow your domain to request the resource.

Check out the CORS documentation, and this awesome Udacity video explaining the Same Origin Policy.

You can also use no-cors mode on the client side, but this will just give you an opaque response (you can't read the body, but the response can still be cached by a service worker or consumed by some API's, like ):

fetch(request, {mode: 'no-cors'}) .then(function(response) { console.log(response); }).catch(function(error) { console.log('Request failed', error) });