Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!
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 ?
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 ?
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.
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.
User | Count |
---|---|
15 | |
2 | |
1 | |
1 | |
1 |
User | Count |
---|---|
16 | |
11 | |
5 | |
4 | |
3 |