No, scratch that, it works! The first one works without CORS, there was a problem elsewhere. All calls to our backend were throwing cors errors, we fixed it and now it works!
Many thanks
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Following this document: https://video2.skills-academy.com/en-us/sharepoint/dev/embedded/tutorials/using-file-preview
I have successfully obtained the item preview url by calling this endpoint first:
POST https://graph.microsoft.com/{version}/drives/{driveId}/items/{itemId}/preview
Making a GET request to the url that is returned by this endpoint, then shows us the preview. This works if I open it in browser.
Rendering it inside iframe on our frontend does not though because of CORS error, as mentioned on the tutorial page.
you might get a CORS error if you attempt to access the Microsoft Graph endpoint directly from a script from your page.
It says there to create an endpoint on your backend, that will return the item-preview-url and then set that url to iframe's src attribute like so:
document.getElementById('preview').src = response + "&nb=true";
This does however not work. This results in CORS error.
I've created another endpoint that fetches this url via GET request and returns the actual preview. It's a HTML string which I then inject into iframe as a content and not src. This then works OK without CORS error but feels wrong.
Would this be acceptable solution in terms of security, etc ? Or maybe, this is how it should be and I just misunderstood the tutorial?
Much appreciated for any insight!
Best,
No, scratch that, it works! The first one works without CORS, there was a problem elsewhere. All calls to our backend were throwing cors errors, we fixed it and now it works!
Many thanks
Hi,
A CORS (Cross-Origin Resource Sharing) error occurs when a web request is made in the browser to an endpoint on a domain that is different from the domain of the webpage making the request. Let’s break it down:
https://your-website.com
and it tries to make an API request to https://api-server.com
, the browser considers these different domains.Access-Control-Allow-Origin
header to the desired domain.*
(not recommended for security reasons).