Uncaught DOMException: Blocked a frame with origin "http://localhost:9009" from accessing a cross-origin frame.

Describe the bug After updated storybook 3 to 5 the ‘actions addon’ throws CORS error when an action is performed. Figured out that setting the ‘depth’ option to 2 or less is a work around and no error appears. Posting bug report hoping any better solution may be found.

To Reproduce Steps to reproduce the behavior:

1. Initiate any action on storybook 5. CORS error appears in console.

Expected behavior Actions should be performed.

Screenshots N/A

Code snippets I traced the bug to the following line:

      var data = (0, _telejson.stringify)({
        key: KEY,
        event: event
      }, {
        maxDepth: depth
      }); // TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
      // might replace '*' with document.location ?

      iframeWindow.postMessage(data, '*');
      return Promise.resolve(null);

This configuration fixes the issue. But it would be great to have this resolved and allow for display of action with greater depth of the object.

configureActions({
  depth: 2 // anything higher than 2 causes CORS error in iframe postMessage method
});

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: react
• Addons: actions
• Version: 5.1.9

Additional context This happened after upgrading from 3 to 5. Default webpack config is used. Babel was also upgraded to 7.

[brycesnyder]

I’m getting this when attempting to build my local by running yarn build-storybook and then opening the index.html within the storybook-static repo… Just upgraded to 6.0.21

[ldeveber]

I’m seeing this in 6.0.26. In my case, once I delete my one .mdx story, it builds and works fine. When I have a mix of js and mdx stories is when I see this error. I should also note that running yarn storybook works fine, its just when building the docs I see this error.