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

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
s_papaioannou
Frequent Visitor

React - Embed Power Bi

Hello!

 

Is it possible to embed a power bi report in a React application? We have followed quite a lot documentation procedures on how to embed in our app, but we are getting blocked by CORS Policy.

 

Just to mention our current state, we have done the following :

 

Create an azure portal subscription

Create an A.A.D

Create Power Bi Pro license

Power BI Admin Portal access 

Create a Service Principal

Registered new app in Azure Portal

Got Application ID, Tenenat ID, PowerBi Secret value

Create a Security Group

Added the App Registration 

Configured Power BI Tenant to allow embedding

Added the security group housing the service principal

Allowed service principles to use Power BI APIs

Enabled Azure AD App to access the reports in my workspace

Add our security group

Created Function APP with .NET Runtime stack

Generated the Embed Token using the HTTP Trigger succesfully

Added "powerbi-client" + "powerbi-client-react"

Created a Power BI Capacity in our Subscription

 

Nonetheless, it will return this error

 

Access to XMLHttpRequest at 'https://reactpowerbifunction.azurewebsites.net/api/HttpReactBi?code=_****==' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

Do you know if it is possible to make it work ?

 

3 REPLIES 3
s_papaioannou
Frequent Visitor

Thank you for your clarification!

Is it possible to to get the REST API in NODE.JS ? I stumbled upon this repository and I am a bit at loss on what is going on. 

Here it says that : Node SDK is not supported any more. The Node SDK is no longer supported. If you are interested in this SDK, and would like to see it continue, please vote for it on the Power BI ideas site.

 

I found that in this link -> https://github.com/Microsoft/PowerBI-Node

 

So what is going on? Is it supported or not ?

s_papaioannou
Frequent Visitor

I forgot to mention that we tried through Postman too and we succeded in getting a response. 

Also, solutions like disabling-web-security, adding extensions to browsers and removing CORS policy from our app, are out of the question.

Hi @s_papaioannou ,

 

I think this a problem about HTML protocol.

Cross-Origin Resource Sharing (CORS) is used to permit loading of resources on other origins, such as a domain, protocol, or port, via HTTP headers.

vchenwuzmsft_0-1659678712348.png

 

You can refer this link.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 

 

Best Regards

Community Support Team _ chenwu zhu

 

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

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

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