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 #9311 (comment)

[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:

storybook/lib/api/src/modules/refs.ts

Lines 68 to 71 in 824fe54

	promise.then(
	(r) => (r.ok ? r : (false as const)),
	() => false as const
	)

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:
#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.