I'm trying to embed a PowerBI report into my web app, that is running locally in my dev server, with the Javascript API. I know everything is working since I succesfully rendered the desired report in the Playground, so it can't be a problem with the Embedded Server or Azure. In my console window there are multiple warnings and errors of external resources blocked by the same origin policy, and an uncaught exception: [object Object] error probably related to the PBI Javascript API that i can't decipher. The report just loads forever, displaying the animated PowerBI logo. Is anybody else experiencing this issue while trying to embed a report locally? Here's the code responsible for rendering:
var embedContainer = $("#container"); var models = window.['powerbi-client'].models; var config= { type: 'report', tokenType: models.TokenType.Embed, accessToken: ginormous embed token, embedUrl: https://app.powerbi.com/reportEmbed?reportId=ommited_for_privacy&groupId=ommited_for_privacy, id: the_report_id, permissions: models.Permissions.All, settings: { filterPaneEnabled: true, navContentPaneEnabled: true } }; // Embed the report and display it within the div container. var report = powerbi.embed(embedContainer.get(0), config);
Here are all the console errors:
uncaught exception: [object Object] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dc.services.visualstudio.com/v2/track. (Reason: CORS request did not succeed). Source map error: request failed with status 404 Resource URL: http://localhost:3000/temp/scripts/App.js Source Map URL: powerbi.js.map Source map error: request failed with status 404 Resource URL: https://app.powerbi.com/13.0.5314.162/scripts/ai.0.js Source Map URL: ai.0.js.map Source map error: request failed with status 404 Resource URL: https://app.powerbi.com/13.0.5314.162/scripts/reportembed.externals.bundle.min.js Source Map URL: interact.min.js.map