Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
Hello.
I have been working on a .NET Core application with React. Server side works fine (tokens generated work on the powerbi javascript demo, but not in my app), but im unable to display the report client-side.
Tokens from PowerBI Javascript Demo neither my server work.
GET https://wabi-north-europe-redirect.analysis.windows.net/metadata/cluster 403 (Forbidden)
I have recreated a small application with Microsoft/TypeScript-React-Starter. Have published the app on github. Here is the component:
import * as React from 'react'; import * as pbi from 'powerbi-client'; export default class App extends React.Component<{}, {}> { private powerbi: pbi.service.Service; private embedContainer: HTMLDivElement; constructor(props: {}) { super(props); this.powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory); } public render() { return ( <div className="embedContainer" powerbi-type="report" style={{'height' : '600px', 'width' : '100%'}} ref={(div) => { if (div) {this.embedContainer = div; }}}/> ); } componentDidMount() { // console.log(this.props); let config = { 'accessToken': 'H4sIAAAAAAAEACWWx6rFCo5F_-VN3eCcGmpg-zjnHGbOOWcX_e99qZqKLRBL2pL-_Y-VvsOcFv_87z9H1MgeRM4z0RXcnEWVWhkkNVt6AHztEwfLAhtYTOi4qzQ0Y7acQBPIiN56hsJySJcl6iyfVL-uMIAGVoAWFdN64nwBVvgDVAFh1lrtZ1i3sPrsAaK7IUqEX413cBHngxgA1J3mrAXuTsvuRDl-bGB2MvFpWsW830ZP8_7Knt5tkP9w0ztfvfh2GS53sAD0VbgNGrWBw1Qy8rGnWbL6XcHqF-sXL--00f8kMPLhXSdYOEgfKJ4mZjYsxpyBmbeA-nkmRsKSvugMkLVx59stGvNQQ8aPsh3OGCU5VBmC8IgRHohk8qsjLjNhs9-viHUExAsc0l5RjAEctKyic5U9x7U9KZf9nJI-oCpys4zCARSWedycz6EntO64UJRLW5Zkij0QXt09-NY5SZuqEjXwthvr-iycjqxlWAoCt6Rrnl5rZkgjyX3kcEpuK-t-CzQ2rDx2RioaYUgp-Sy-94NZucciJqChzOPwir5eXTzow5HeGPxLM6LJWH_DzxUpT6r0rDRUafiE1pCKqVY7G1Ypcwc4YBfrAlZEM7Oid8NUrd5RYiCluGXmjfsCtDzjCFDT10hWaxtKud9y5IXlKOt1ky0ZnTRdYcXUK5jz6RtNCbaXEJkmDc7CVwHs3AMKsGVR6WlThy9NxuCFeAY7I0GmuDyJJZEquU6EfWcibGF-NryP7CHPHd0o8KrqgLwf_NiqR9JlKTB2p-4a61NiqGeSL9frlAwBnAsWS6rfRSj9AIX2I6NzWQiByAc0KsVXTaUikoGN7-7U5DDN4kCtppkzXZx0PtvGwNS_cENZnY-wS_91tqTswynochBYcC81fJkBgLw6raXpEMn0cRDuDpllhm3VM94i2K9Tz8qzYs6hNUe_u20_8WK2IJirGSDjTP6gRSeynzfezCpBEPhB77lPqPPzpY7ASiCoH0B7AhPZkzHwqvfKkCjEBM8pPvPL56GY6cXwxTtymSW0sZnh4jJKzViRYod5rxa_qUvKw0CBE84GeNfCCL4bSW7z-Vtze1a2fpZdqBOIHRzQdNAM76k6SaVZ-4lNU_NbY1GD_cl04LspxoNL4EhxdFexX0bAZ1esq4phqlnw1afJaI2lQy2ugkbetB0tUJhopCmSUOn1nqZzatYcE-VGrL1pPKhUGTbGsYPyvmcCiezfQeiakOaBQCa7n53M_OUy0Zyj3tlMZ4QlTTrLva7p3_QzMGlBOti_oPLV8JBkgDXnA3i5LvqOH54u1vTbpU_hvLkiz53EUSHnMei3TQ4sKSsSlNGIr2l7Nu4NmvR1XN0GbVvcjWEUvrJByulJPheYTENV4BPexKsrrgvxRetL2Q5_9VmQl10SmUAcueGA0MoiC1ThZw21CO-gkLkcxTxf9_vMj7nOCxZUjHl60eRsKLXi_lQXvtkzesblG3n7DO6M9yRuToWiE7LZxHuyTjoM0OCpfcqFeJGMat-Ct12_BPGzVL42EosawwEbpU5qp5STkJ7T547a1fNcR_ZnIvaDgBaoMMN3lbWrWMLUt4rTvzECbbPpuk8X9IMmGGu5ZHhgF52hteaL1JXFiMf4SwwLMUx6bxKGLMk12tUs_GsgXFdwxCepmJ3RMNiiQKmDUaPRTZpN7E1GqoK84XZUI6UAAnbWMgLX1q0IQ0u0u-ZN538_Uq1FJXBCeOtLEL78ZEdphNWVbKWpzp825po-eSGx8PnVNQ-BasXcuSx5idVX-jV7vB1WQIRsoG5o1ZkLPxKxn-dqMRHsUMdD1ZEdcTsCHUP_tsKo-gd5blUSDbSUTEXqtQrRBnFv6b-56rclkaakSrSRmeBp7xdOZ_k4mrXWroWFILSGdkdrPowzl_rEJ_42Vu60_SPShyTV-6EfKUgJsbVf8ZwH9wA2zZpG4uoIhXI_TW6XX740WE4-BuKIpTX6kHjgFe-0l4MvOYd8t4JIeVfQDKmfOqTQdkIV6UQ6SimpF4PEs7sxpBBCYCsbcnmaUUWmQotCv9JMn45fwDgrisny2hZr3kwMizhSZAXHRQjlR8QBCwhNEZOp8_0o-f3lupftnb8q1UY5UkuKf9X9pni_NudE6VX5O-1UBtwF85ZtS4v276BI3gxOAvavf_7nH257l2NWy_fvdWABg0tp--YwecRnza8bvhb1NSiah5lLW4PY2Iu4cvEqRQIX0M6qtalVsQGJBdMUHmA2m7TYDMT8xWHMcHvFURcGKdBg3l091HrpUiDD2vI87He4uka1IKHZ9H4nBJ3X76-29Jcp4XZVibFL8aRlARp2dvk9rP6nFuhSZfT8F742_NfzndCS4QHkyOkmL689ni3dWJ-g5XOFvBwbhfpxcgduYawng9iOmqik5AsWNxzVwSc9U_-aUso2eIBA6D486-9UOPb8EHCFjBbAV7wWpqfdWSH6Eu4twCIe4ZMMAoC4hhd2CaNMvit7Zn5bWqsILboqz6JXWij7gii526qmqHuw__UfzO_SlJsc_FGWG3ShUUxf49kfGHl_ZBPF_6ty23pKj3Mr_2TdXioeGeDZ2bn2qNAIg14akmpxeiD3xZtvtY37s6VrOoRG8Ica9LtPRxiiJJzxc7BhrxE9_Mt8XeLRR5aoh1DcYjtVGj3Be19ndcLL9DyuKROPsCpl8dqrC7oXhzwAd5SXheJF4sEmz1KbwoTbn-XY6zDctNehRSD__RxBPD-5qiJmvvtJR77QkVm_krjzwLxVHoHTEa7-jZCWtU-r3pm8X2JHn_aIMNHC-urtbSY4-b3l1D0XuUudzllFEtQTrZ8zghwtRb1ehOEMoskaasC_6Gdr-dTN1_Bk0mSgxXjwVoLBUwdFbXGgeYq7a5bRqdqzzsXkf175lHqovTO_JrcM7z_M__f_5Oa7BC4LAAA=', 'embedUrl': 'https://app.powerbi.com/reportEmbed?reportId=bac25fa7-d58d-40b6-8b01-606d165c3b43&groupId=be8908da-da25-452e-b220-163f52476cdd', 'id': 'bac25fa7-d58d-40b6-8b01-606d165c3b43' }; console.log(config); this.powerbi.embed(this.embedContainer, config); } }
(The token was generated with the demo)
Hello.
I have been working on a .NET Core application with React. Server side works fine, but im unable to display the report client-side.
Tokens from PowerBI Javascript Demo neither my server work.
I have recreated a small application with Microsoft/TypeScript-React-Starter. Here is the component:
import * as React from 'react'; import * as pbi from 'powerbi-client'; export default class App extends React.Component<{}, {}> { private powerbi: pbi.service.Service; private embedContainer: HTMLDivElement; constructor(props: {}) { super(props); this.powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory); } public render() { return ( <div className="embedContainer" powerbi-type="report" style={{'height' : '600px', 'width' : '100%'}} ref={(div) => { if (div) {this.embedContainer = div; }}}/> ); } componentDidMount() { // console.log(this.props); let config = { 'accessToken': 'H4sIAAAAAAAEACWWx6rFCo5F_-VN3eCcGmpg-zjnHGbOOWcX_e99qZqKLRBL2pL-_Y-VvsOcFv_87z9H1MgeRM4z0RXcnEWVWhkkNVt6AHztEwfLAhtYTOi4qzQ0Y7acQBPIiN56hsJySJcl6iyfVL-uMIAGVoAWFdN64nwBVvgDVAFh1lrtZ1i3sPrsAaK7IUqEX413cBHngxgA1J3mrAXuTsvuRDl-bGB2MvFpWsW830ZP8_7Knt5tkP9w0ztfvfh2GS53sAD0VbgNGrWBw1Qy8rGnWbL6XcHqF-sXL--00f8kMPLhXSdYOEgfKJ4mZjYsxpyBmbeA-nkmRsKSvugMkLVx59stGvNQQ8aPsh3OGCU5VBmC8IgRHohk8qsjLjNhs9-viHUExAsc0l5RjAEctKyic5U9x7U9KZf9nJI-oCpys4zCARSWedycz6EntO64UJRLW5Zkij0QXt09-NY5SZuqEjXwthvr-iycjqxlWAoCt6Rrnl5rZkgjyX3kcEpuK-t-CzQ2rDx2RioaYUgp-Sy-94NZucciJqChzOPwir5eXTzow5HeGPxLM6LJWH_DzxUpT6r0rDRUafiE1pCKqVY7G1Ypcwc4YBfrAlZEM7Oid8NUrd5RYiCluGXmjfsCtDzjCFDT10hWaxtKud9y5IXlKOt1ky0ZnTRdYcXUK5jz6RtNCbaXEJkmDc7CVwHs3AMKsGVR6WlThy9NxuCFeAY7I0GmuDyJJZEquU6EfWcibGF-NryP7CHPHd0o8KrqgLwf_NiqR9JlKTB2p-4a61NiqGeSL9frlAwBnAsWS6rfRSj9AIX2I6NzWQiByAc0KsVXTaUikoGN7-7U5DDN4kCtppkzXZx0PtvGwNS_cENZnY-wS_91tqTswynochBYcC81fJkBgLw6raXpEMn0cRDuDpllhm3VM94i2K9Tz8qzYs6hNUe_u20_8WK2IJirGSDjTP6gRSeynzfezCpBEPhB77lPqPPzpY7ASiCoH0B7AhPZkzHwqvfKkCjEBM8pPvPL56GY6cXwxTtymSW0sZnh4jJKzViRYod5rxa_qUvKw0CBE84GeNfCCL4bSW7z-Vtze1a2fpZdqBOIHRzQdNAM76k6SaVZ-4lNU_NbY1GD_cl04LspxoNL4EhxdFexX0bAZ1esq4phqlnw1afJaI2lQy2ugkbetB0tUJhopCmSUOn1nqZzatYcE-VGrL1pPKhUGTbGsYPyvmcCiezfQeiakOaBQCa7n53M_OUy0Zyj3tlMZ4QlTTrLva7p3_QzMGlBOti_oPLV8JBkgDXnA3i5LvqOH54u1vTbpU_hvLkiz53EUSHnMei3TQ4sKSsSlNGIr2l7Nu4NmvR1XN0GbVvcjWEUvrJByulJPheYTENV4BPexKsrrgvxRetL2Q5_9VmQl10SmUAcueGA0MoiC1ThZw21CO-gkLkcxTxf9_vMj7nOCxZUjHl60eRsKLXi_lQXvtkzesblG3n7DO6M9yRuToWiE7LZxHuyTjoM0OCpfcqFeJGMat-Ct12_BPGzVL42EosawwEbpU5qp5STkJ7T547a1fNcR_ZnIvaDgBaoMMN3lbWrWMLUt4rTvzECbbPpuk8X9IMmGGu5ZHhgF52hteaL1JXFiMf4SwwLMUx6bxKGLMk12tUs_GsgXFdwxCepmJ3RMNiiQKmDUaPRTZpN7E1GqoK84XZUI6UAAnbWMgLX1q0IQ0u0u-ZN538_Uq1FJXBCeOtLEL78ZEdphNWVbKWpzp825po-eSGx8PnVNQ-BasXcuSx5idVX-jV7vB1WQIRsoG5o1ZkLPxKxn-dqMRHsUMdD1ZEdcTsCHUP_tsKo-gd5blUSDbSUTEXqtQrRBnFv6b-56rclkaakSrSRmeBp7xdOZ_k4mrXWroWFILSGdkdrPowzl_rEJ_42Vu60_SPShyTV-6EfKUgJsbVf8ZwH9wA2zZpG4uoIhXI_TW6XX740WE4-BuKIpTX6kHjgFe-0l4MvOYd8t4JIeVfQDKmfOqTQdkIV6UQ6SimpF4PEs7sxpBBCYCsbcnmaUUWmQotCv9JMn45fwDgrisny2hZr3kwMizhSZAXHRQjlR8QBCwhNEZOp8_0o-f3lupftnb8q1UY5UkuKf9X9pni_NudE6VX5O-1UBtwF85ZtS4v276BI3gxOAvavf_7nH257l2NWy_fvdWABg0tp--YwecRnza8bvhb1NSiah5lLW4PY2Iu4cvEqRQIX0M6qtalVsQGJBdMUHmA2m7TYDMT8xWHMcHvFURcGKdBg3l091HrpUiDD2vI87He4uka1IKHZ9H4nBJ3X76-29Jcp4XZVibFL8aRlARp2dvk9rP6nFuhSZfT8F742_NfzndCS4QHkyOkmL689ni3dWJ-g5XOFvBwbhfpxcgduYawng9iOmqik5AsWNxzVwSc9U_-aUso2eIBA6D486-9UOPb8EHCFjBbAV7wWpqfdWSH6Eu4twCIe4ZMMAoC4hhd2CaNMvit7Zn5bWqsILboqz6JXWij7gii526qmqHuw__UfzO_SlJsc_FGWG3ShUUxf49kfGHl_ZBPF_6ty23pKj3Mr_2TdXioeGeDZ2bn2qNAIg14akmpxeiD3xZtvtY37s6VrOoRG8Ica9LtPRxiiJJzxc7BhrxE9_Mt8XeLRR5aoh1DcYjtVGj3Be19ndcLL9DyuKROPsCpl8dqrC7oXhzwAd5SXheJF4sEmz1KbwoTbn-XY6zDctNehRSD__RxBPD-5qiJmvvtJR77QkVm_krjzwLxVHoHTEa7-jZCWtU-r3pm8X2JHn_aIMNHC-urtbSY4-b3l1D0XuUudzllFEtQTrZ8zghwtRb1ehOEMoskaasC_6Gdr-dTN1_Bk0mSgxXjwVoLBUwdFbXGgeYq7a5bRqdqzzsXkf175lHqovTO_JrcM7z_M__f_5Oa7BC4LAAA=', 'embedUrl': 'https://app.powerbi.com/reportEmbed?reportId=bac25fa7-d58d-40b6-8b01-606d165c3b43&groupId=be8908da-da25-452e-b220-163f52476cdd', 'id': 'bac25fa7-d58d-40b6-8b01-606d165c3b43' }; console.log(config); this.powerbi.embed(this.embedContainer, config); } }
(The token was generated with the demo)
Have published the app on github.
git clone git@github.com:Ameb/powerbi-react-demo.git cd power-bi-react-demo npm install npm start
The error:
GET https://wabi-north-europe-redirect.analysis.windows.net/metadata/cluster 403 (Forbidden)
reportEmbed.min.js:1 XHR failed loading: GET "https://wabi-north-europe-redirect.analysis.windows.net/metadata/cluster".
No solution, but I'm having the same issues. Using the `react-powerbi` <Report/> component. Pass in an access token (which I can see being sent in the authorization header), report embed url, id and display settings.
The <iframe> is created, I can see that https://dc.services.visualstudio.com/v2/track is called a few times successfully but then it fails on GET https://wabi-west-europe-redirect.analysis.windows.net/metadata/cluster with a 403 Forbidden.
Response Headers:
Access-Control-Allow-Credentials:true Access-Control-Allow-Origin: https://app.powerbi.com Content-Length: 0 Date: Wed, 13 Jun 2018 07:50:14 GMT RequestId: f576cc3d-ddfb-9d07-37fe-cf93a03999ce Server: Microsoft-HTTPAPI/2.0 Strict-Transport-Security: max-age=31536000; includeSubDomains X-Content-Type-Options: nosniff X-Frame-Options: denyDon't know if X-Frame-Options: deny is an issue there seeing it is being returned into an <iframe>, or if that's just because of the initial 403 state.
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Check out the June 2025 Power BI update to learn about new features.
User | Count |
---|---|
4 | |
4 | |
3 | |
3 | |
2 |