React - Embed Power Bi

[s_papaioannou]

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 ?

[s_papaioannou]

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]

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.

[v-chenwuz-msft]

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.

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.