CORS error on Drive item preview endpoint

Python Developer 7 25 Reputation points

Following this document:

I have successfully obtained the item preview url by calling this endpoint first:


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!


Microsoft Graph
Microsoft Graph
A Microsoft programmability model that exposes REST APIs and client libraries to access data on Microsoft 365 services.
11,128 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,659 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Python Developer 7 25 Reputation points

    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 No comments

  2. Deepanshu Sharma 490 Reputation points Microsoft Vendor


    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 and it tries to make an API request to, 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 No comments