microsoft/powerbi-client-angular

Gov Cloud Reports are not rendering in Angular Component due to CROS issue

rush2kasi6401 opened this issue · 9 comments

rush2kasi6401 commented

We have reports in app.powerbigov.us (Gov cloud) and embed url also having https://app.powerbigov.us/reportEmbed?reportId=....
However, angular failed to load report due to cros issue.

Here is Network traffic results:
image

What I have observed is call in going to below URL failed. But why we have Referer: https://app.powerbi.com/ for the below URL instead of https://app.powerbi.com/ Due to this I suspect CROS issue. Why this is happening?

Request URL: https://wabi-us-gov-iowa-redirect.analysis.usgovcloudapi.net/explore/reports/1a1f947a-e0de-4cf8-a645-27f22730f6d4/conceptualschema?userPreferredLocale=en-US

Appreciate your feedback.

bapat-atharva commented

Hi @rush2kasi6401,

The powerbi-service should be able to automatically detect the environment you are trying to embed with.
Can you let us know how you are generating the embed-url and the access-token ? Can you also let us know the request body where the referrer is app.powerbi.com ?

rush2kasi6401 commented

We are using the following code to set the token (Service Priciple) and Embed Url.

try {
// reportConfigResponse = await this.pbiService.getEmbedConfig().toPromise();
forkJoin(
[ this.pbiService.getEmbedTripsConfig()]
).subscribe(
([res]) => {
reportConfigResponse = res
}
).add(() => {
// Update the reportConfig to embed the PowerBI report
this.reportTripsConfig = {
...this.reportConfig,
id: reportConfigResponse.Id,
embedUrl: reportConfigResponse.EmbedUrl,
accessToken: reportConfigResponse.EmbedToken.token
};
});

    } catch (error: any) {
      this.displayMessage = `Failed to fetch config for report. Status: ${error.status} ${error.statusText}`;
      console.error(this.displayMessage);
      return;
    }

Here is the API code to get token
[HttpGet]
[Route("api/PbiAuth/EmbedReportConfig")]
public async Task EmbedReportConfig()
{
var embedResult = await m_embedService.EmbedReport();
if (embedResult)
{
return m_embedService.EmbedConfig;
}
else
{
return m_embedService.EmbedConfig;
}
}

We don't have an issue generating token or getting embed url.

Here is the embed URL:
https://app.powerbigov.us/reportEmbed?reportId=1a1f947a-e0de-4cf8-a645-27f22730f6d4&groupId=531ebe59-d47a-4846-87ec-61fe1790de34&w=2&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVVTLUdPVi1JT1dBLXJlZGlyZWN0LmFuYWx5c2lzLnVzZ292Y2xvdWRhcGkubmV0IiwiZW1iZWRGZWF0dXJlcyI6eyJtb2Rlcm5FbWJlZCI6dHJ1ZSwidXNhZ2VNZXRyaWNzVk5leHQiOnRydWV9fQ%3d%3d

However, getting below failures and failed to load report. I am confused, why referer is having: https://app.powerbi.com
image

bapat-atharva commented

Thank you for the information. I am assuming you are using the correct environment config for authenticating and making requests to powerbi similar to here.
We will check and let you know if we find anything.

rush2kasi6401 commented
rush2kasi6401 commented

@bapat-atharva - Here is more information on how we successfully embedded a sample commercial cloud dashboard. Whereas gov cloud report failed to embed due to CROS Issue as shown in below figures

image

image

bapat-atharva commented

Thank you @rush2kasi6401 for getting back with more information. We were able to embed using the US gov environment when we tried to, but we need to check for when migrating from Angular 10 to 14.

As I understand you were able to embed in a brand new Angular 14 application, so I am not sure if the issue lies with the package. We will update if we find anything.

rush2kasi6401 commented