storybookjs/storybook

[Bug]: CORS issue with Storybook composer and hostname

Open

#24,329 建立於 2023年9月28日

在 GitHub 查看
 (1 留言) (0 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
compositionhelp wantedquestion / support

描述

Describe the bug

I'm using the Storybook composer to load in other Storybooks, these Storybooks also have a custom hostname. When running the composer I hit the following issue:

Uncaught TypeError: Cannot read properties of null (reading 'storyId')
    at chunk-45GKKSU6.js:398:54577
    at Array.map (<anonymous>)
    at chunk-45GKKSU6.js:398:54428
    at renderWithHooks (chunk-NBCGHFLK.js:69:936)
    at updateFunctionComponent (chunk-NBCGHFLK.js:69:48263)
    at updateSimpleMemoComponent (chunk-NBCGHFLK.js:69:46640)
    at updateMemoComponent (chunk-NBCGHFLK.js:69:44544)
    # ....

Access to fetch at 'https://web.bitttttten.com:7007/index.json' from origin 'https://web.bitttttten.com:7006' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
:7007/stories.json:1

The composer is run with storybook dev -p 6006 -h 'web.bitttttten.com', and there is a proxy that proxies 7006 to 6006 so you're able to have storybook running locally on 6006, and with SSL at https://web.bitttttten.com:7006.

The storybook is run with storybook dev -p 6007 -h 'web.bitttttten.com'.

To Reproduce

Run with hostname and composer and see the CORS issue.

If there is any other info needed, please let me know.

貢獻者指南

技術棧
typescriptreact
領域
frontendtooling
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
stale
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
mostly clear
前置要求
Basic knowledge of StorybookUnderstanding of CORS
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
50
研究方向
Investigate the CORS handling in the Storybook composer. The error occurs when fetching index.json from a different port with credentials. Look at the composer's fetch logic and how it sets credentials mode. Files like `code/lib/composer/src/index.ts` or similar might contain the relevant code. Check if there's a way to configure CORS or disable credentials for cross origin requests. Also examine the Storybook dev server's CORS headers.