CORS issue postMessage target origin does not match

[ajelcocks]

I have a web application currently in development built in JavaScript ES6 modules using webpack (in VS Code)

I am getting... Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:4015') does not match the recipient window's origin ('http://localhost:4010').

I have the report server as 4015 and the lite-server of dev mode is running at 4010

I have connected SQ management Studio to ReportServer and set AccessControlAllowOrigin to each of http://localhost:4010, http://localhost:4015, http://localhost and *, restarted the service but the error persists.

The web application embeds an iframe element with the src attribute set to the url of the report. The report is rendered bu I interpret this as meaning the report has tried to fire some notification messages (loaded, perhaps) and failed with this message.

Any ideas or help would be appreciated as I have exhausted the internet searching for a solution!

[d_gosbell]

---

@ajelcocks wrote:

The web application embeds an iframe element with the src attribute set to the url of the report. The report is rendered bu I interpret this as meaning the report has tried to fire some notification messages (loaded, perhaps) and failed with this message.

Any ideas or help would be appreciated as I have exhausted the internet searching for a solution!

---

Have you included the rs:embed=true query string parameter in the report url? If you have not included the rs:embed parameter PBIRS will try to render all the navigation elements around the report which might be what is causing this issue.

[ajelcocks]

Yes, I have. This is the url and hostdata

  let hostdata = {

    Build: "15.0.1102.620",

    ExternalUser: "True",

    IsPublicBuild: true,

    Host: "Microsoft.ReportingServices.Portal.Services",

    HashedUserId:

      "A4A5A6E6E5E4F5027C9EE13957705E6E3112D06DDF95F57FBB4A161",

    InstallationId: "abcde-9700-4abc-abcd-a1234abcd1234",

    IsEnabled: true,

    Edition: "PBIRS Developer",

    AuthenticationTypes: "RSWindowsNTLM",

    NumberOfProcessors: 1,

    NumberOfCores: 4,

    IsVirtualMachine: false,

    MachineId: "01020304B1B2B3B41234567890ABCCBE",

    CountInstances: 1,

    Count14xInstances: 0,

    Count13xInstances: 0,

    Count12xInstances: 0,

    Count11xInstances: 0,

    ProductSku: "SSRSPBI"

  };

  let reportUrl = `http://localhost:4015/powerbi/?rs:embed=true&id=12345678-abcd-1234-abcd-ee77dd66&formatLocale=en-US&hostdata=${JSON.stringify(

    hostdata

  )}`;

[d_gosbell]

Sorry, that was the only idea I had.

I'm not familiar with the hostdata parameter. I have not seen it used before with PBIRS and can't see any documentation on it. But it does not look like any of the information you are passing there would influence CORS in any way.

Are you able to see the call stack of that exception using the chrome dev tools? That my give you a hint as to whether it's your app or the report triggering this.

[ajelcocks]

I got the hostdata parameter from one of the examples on the web. I don't know if it does anything but the example used it so I left it in.

If I change 4015 in the url of the report server to 4010 and use fidler to redirect to 4015 then the error does not occur. This suggests to me it is the report server. The error itself would support that, indicating that postMessage was invoked by code delivered from 4015 for a recipient at 4010

Thanks for the suggestions.

For anyone else reading this - the 'solution' I found is to use fiddler and add a rule to redirect

I changed the port of the url for the powerbi report in my we app from 4015 (the powerbi port) to 4010 (my apps port) and added a rule in fiddler to intercept that and change the port to 4015. This 'spoofs' the report server and so the error does not occur.

Maybe not the 'real' solution, but it works.