Storybook: Experiencing some CORS issue in `v6.0.0` while using storybook composition feature.

[rannyeli]

Experiencing some CORS issue in v6.0.0 while using storybook composition feature.
I'm adding a ref for a local storybook:

refs: {
    react_components: { 
      title: "React Components", 
      url: "http://localhost:9010"
    },

The local storybook works well on port 9010, but not loaded from the combined storybook

dev-tools output:

node - v14.5.0
react - v16.13.1

In addition, I would like to know if there is an option to give a path of the storybook build directory as a url of ref?

_Originally posted by @rannyeli in https://github.com/storybookjs/storybook/issues/9311#issuecomment-671426067_

[tmeasday]

@rannyeli -- can you check the network tab -- there should be a "no cors" fetch request to http://localhost:9010/iframe.html also -- is that failing also?

[rannyeli]

@tmeasday http://localhost:9010/iframe.html works and returns 200.

[tmeasday]

@rannyeli -- to be clear -- do you mean that you yourself browsed there, or that the request that SB makes in the background worked?

[tmeasday]

OK, I reproduced this. @ndelangen the bug here is the assumption encoded in this test:

https://github.com/storybookjs/storybook/blob/824fe5402f9e6f63c5a4b3474ee247ab69bb86c1/lib/api/src/tests/refs.test.js#L601:L601

and in these lines:

https://github.com/storybookjs/storybook/blob/824fe5402f9e6f63c5a4b3474ee247ab69bb86c1/lib/api/src/modules/refs.ts#L68-L71

When you do a no-cors fetch, even if it works, ok is false it seems:

[tmeasday]

@ndelangen there is an issue here because there is no way to tell if a mode: 'no-cors' request 404s or otherwise. We need to go over this again.

[tmeasday]

I suspect the obvious solution is to add CORS headers to the dev server.

[TechieQian]

I built storybook static and served the assets from a cors enabled python http server.

I was able to get the right response headers (Access-Control-Allow-Origin: *).

But I was still getting a cors issue for stories.json. I actually don't see any stories.json being generated. Is this a different issue?

[TechieQian]

Thanks it works now! I think it would be beneficial to add npx sb extract to composition documentations. I've never used chromatic so stories.json is new to me.

[ndelangen]

there is no way to tell if a mode: 'no-cors' request 404s or otherwise. We need to go over this again.

if there's no method to determine if a no-cors request succeeded of failed we can remove that check entirely, but we're left with a bug where if the composed storybook 404's it will just be in a pending state forever.

[basher]

I get the same CORS error while trying out composition for the first time.

I'm using @storybook/html": "^6.0.4".

I get 200 OK response for both stories.json and iframe.html.

Here's a screenshot of my response:

I've highlighted the empty HTML storybook in the left menu, and the response which shows what should be displayed in the story iframe.

---

Question:
Before trying composition, I was using standalone Storybook to preview my HTML stories, because I use Parcel bundler rather than Webpack.

i.e. I ran npm run storybook -- --preview-url=http://localhost:1337/iframe.html to view my HTML (with Parcel) stories.

Is Storybook composition a replacement for standalone?

[ndelangen]

related:
https://github.com/storybookjs/storybook/pull/11783

[ndelangen]

I suspect the obvious solution is to add CORS headers to the dev server.

Should be easy enough to do!

[tmeasday]

| Mode | stories.json w/ credentials | stories.json no credentials | iframe.html no cors | iframe.html w/ credentials | iframe.html no credentials | iframe.html from node |
| ----------------------- | ------------------------------- | ------------------------------- | ----------------------- | ------------------------------ | ------------------------------ | ------------------------- |
| Chromatic(public) | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ |
| Chromatic (private) | ✅ | 403 | ❌ | ✅ | 403 | 403 |
| Netlify | ❌ | 404 | ❌ | ❌ | ✅ | ✅ |
| Netlify w/ stories.json | ❌ | ✅ | ❌ | ❌ | ✅ | ✅ |
| SB6 dev mode | 404 | 404 | ❌ | ✅ | ✅ | ✅ |
| SB5 dev mode | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ |
| Broken ref | ❌ | ❌ | ❌ | ❌ | ❌ | 404 |

[ndelangen]

PR is open, with a fix

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.14 containing PR #12085 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.