Share via

CORS error on Drive item preview endpoint

Python Developer 7 25 Reputation points
2024-05-28T12:38:28.4066667+00:00

Following this document: https://learn.microsoft.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,

Microsoft Graph
Microsoft Graph
A Microsoft programmability model that exposes REST APIs and client libraries to access data on Microsoft 365 services.
11,457 questions
Office Development
Office Development
Office: A suite of Microsoft productivity software that supports common business tasks, including word processing, email, presentations, and data management and analysis.Development: The process of researching, productizing, and refining new or existing technologies.
3,720 questions
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Python Developer 7 25 Reputation points
    2024-05-28T13:20:59.5366667+00:00

    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

    1 person found this answer helpful.
    0 comments
  2. Deepanshu Sharma 490 Reputation points Microsoft Vendor
    2024-06-02T19:36:17.57+00:00

    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:

    1. What Causes CORS Errors?
      • CORS errors happen when a frontend (client-side) code running in a browser makes a request to a server (backend) on a different domain.
      • For example, if your frontend is served from https://your-website.com and it tries to make an API request to https://api-server.com, the browser considers these different domains.
      • If the server doesn’t include the necessary CORS headers in its response, the browser blocks the request and displays the error.
    2. How to Fix CORS Errors?
      • The most straightforward way is to configure the server to include the appropriate CORS headers in the response.
      • You can:
      • Allow specific origins by setting the Access-Control-Allow-Origin header to the desired domain.
      • Allow all origins by setting the value to * (not recommended for security reasons).
    0 comments