Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now

Reply
karlrez
New Member

Issue running demo react application

I cloned the demo repository at: https://github.com/microsoft/powerbi-client-react

and have not made any code changes.

 

I run "npm run demo" to start the app, and then after clicking "embed report" I am hit with this error:

 

karlrez_1-1730376666392.png

 

2 REPLIES 2
karlrez
New Member

Thank you for your reply, I see I can follow the steps to change it to use my own report.

 

The demo repo is setup to embed a demo report from Microsoft. Do you know if there is any workaround to authenticate with this report and avoid the error?

v-yohua-msft
Community Support
Community Support

Hi, @karlrez 

You seem to be experiencing the 403 Forbidden error and CORS policy issue. The 403 error usually indicates a permissions issue, and you need to make sure that the API permissions are set correctly in Azure Active Directory and that you have the appropriate permissions to access the Power BI REST APIs. Also make sure you're using the correct token type. For embedded reports, you should use models. TokenType.Aad if you are embedding for your organization. You can check the following links:

Solved: 403 forbidden error while trying to call power bi ... - Microsoft Fabric Community

 

Solved: Re: Embed report using react-powerbi-client ends w... - Microsoft Fabric Community

 

The CORS policy is wrong because the server does not allow requests from your local development environment. You'll need to check that the server hosting the Power BI report has the correct CORS header set up. This typically involves setting the Access-Control-Allow-Origin header to allow requests from your development environment. For local development, you can use a CORS proxy or browser extension to temporarily bypass CORS restrictions. You can check the following links:

What Is CORS Policy Error in React App and How To Get Rid of It? - Upmostly

 

Understanding CORS Policy Errors and Their Resolutions for React Developers – devgem.io - devgem.io

 

How to Get Your Question Answered Quickly

Best Regards

Yongkang Hua

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
OCT PBI Update Carousel

Power BI Monthly Update - October 2024

Check out the October 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

October NL Carousel

Fabric Community Update - October 2024

Find out what's new and trending in the Fabric Community.