CORS error thrown line 46 render.js
RobertAByrnes opened this issue · comments
Hi Folks, Please let me know if you need more info than I provide: I have tried this package with 2 laravel 8 apps. One on a vagrant/homestead installation on windows and one on a wampserver installation on windows. I have read and re-read the docs re package installation. Both time keep getting CORS error thrown from the iFrame within blast page. I have debugged through the JS to line 46 in render.js where the error gets throws. I have tried disabling CORS protection in laravel by commenting CORS line in App\HTTP\Kernal.php, I have also tried adding custom CORS class to laravel to allow all.
I have also debugged through the php call stack - am I correct in thinking you cannot use the url generated in blast.php to access the page as it doesn't contain the necessary parameters e.g. myapp.local/storybook_preview/{because this bit is missing which access the template directory}. I am thinking you have coded this to be NOT accessed in this way but rather through the automated page loading from the 'artisan blast:launch' command with the localhost:6006 url? Therefore, I am starting to think along the lines of Laravel getting it's knickers in a twist over port 6006? or localhost having a fit over who is listening to what?
It is worth noting that I have noticed that the artisan command will boot the storybook server without a webserver running at all and open the browser window (Chrome) with the same errorbut the rest of the page loading ok.
Help resolving this issue would be amazing please as I am looking forward to trying out this package. The only component within the stories directory is the demo one from this package. Cheers, Rob.
STACK TRACE FROM DEV CONSOLE:
DevTools failed to load source map: Could not load content for http://localhost:6006/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:6006/react-popper-tooltip.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
iframe.html:1 Access to fetch at 'http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after' from origin 'http://localhost:6006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
render.js:46 GET http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after net::ERR_FAILED 200
_callee$ @ render.js:46
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:7
_next @ render.js:9
(anonymous) @ render.js:9
(anonymous) @ render.js:9
defaultFetchStoryHtml @ render.js:61
_callee2$ @ render.js:118
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:7
_next @ render.js:9
(anonymous) @ render.js:9
(anonymous) @ render.js:9
_renderMain @ render.js:167
renderMain @ render.js:99
_callee3$ @ StoryRenderer.js:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
Promise.then (async)
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderStory @ StoryRenderer.js:429
_callee2$ @ StoryRenderer.js:266
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderStoryIfChanged @ StoryRenderer.js:290
_callee$ @ StoryRenderer.js:160
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderCurrentStory @ StoryRenderer.js:174
(anonymous) @ StoryRenderer.js:87
(anonymous) @ index.js:168
handleEvent @ index.js:167
handler @ index.js:93
emit @ index.js:100
setSelection @ story_store.js:961
finishConfiguring @ story_store.js:424
ConfigApi.configure @ config_api.js:26
(anonymous) @ loadCsf.js:223
configure @ index.js:17
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:6
webpack_require @ bootstrap:24
webpack_exec @ util.inspect:1
(anonymous) @ util.inspect:1
webpack_require.O @ chunk loaded:23
(anonymous) @ util.inspect:1
webpackJsonpCallback @ jsonp chunk loading:558
(anonymous) @ main.iframe.bundle.js:1
Show 36 more frames
index.js:56 TypeError: Failed to fetch
at _callee$ (render.js:46)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:294)
at Generator.next (runtime.js:119)
at asyncGeneratorStep (render.js:7)
at _next (render.js:9)
at render.js:9
at new Promise ()
at render.js:9
at defaultFetchStoryHtml (render.js:61)
VAR DUMP of fetchUrl - passed into fetch(fetchURL) at which point the error is thrown:
fetchUrl: URL
hash: ""
host: "moneyscout.local"
hostname: "moneyscout.local"
href: "http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after"
origin: "http://moneyscout.local"
password: ""
pathname: "/storybook_preview/blast-demo/button"
port: ""
protocol: "http:"
search: "?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after"
searchParams: URLSearchParams {}
username: ""
COMPOSER.JSON:
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
"php": "^7.3|^8.0",
"area17/blast": "^1.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.54",
"laravel/sanctum": "^2.11",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.3",
"livewire/livewire": "^2.6",
"silviolleite/laravelpwa": "^2.0"
},
"require-dev": {
"facade/ignition": "^2.5",
"fakerphp/faker": "^1.9.1",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.2",
"nunomaduro/collision": "^5.0",
"phpunit/phpunit": "^9.3.3"
},
"autoload": {
"psr-4": {
"App\": "app/",
"Database\Factories\": "database/factories/",
"Database\Seeders\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\Foundation\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi"
],
"post-root-package-install": [
"@php -r "file_exists('.env') || copy('.env.example', '.env');""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
PACKAGE.JSON:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
},
"dependencies": {
}
}
Hi @RobertAByrnes! Thanks for reaching out.
I've created a PR with a fix for the CORS issues (#21) which will be included in the next release this week.
You can access the URL used by Storybook. In your case this would be - http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after. You can also find this URL in the Dev Tools 'Network' tab (and it'll also be in the console if you're seeing a 'failed to fetch' message).
If you see the 'Failed to fetch' message within the Storybook UI it's always worth checking this URL as any errors within your component will trigger it.
Let us know if there's anything else we can help with 👍
Hi @mrtimbrook Thanks for sorting that so quickly. CORS fix works a treat!
@RobertAByrnes Awesome! Glad to hear that. I just wanted to give you a heads up that I published the Blast 1.3 release today which includes the CORS fix.
@mrtimbrook Great news, I've updates to Blast 1.3 the following errors present when running blast:launch, I doub't anything to do with the previous CORS error as when I pulled the fix code in from the diff into 1.2 it worked a treat.
PS C:\git-repos\dashboards> php artisan blast:launch
0/3 [>---------------------------] Reusing npm dependencies...
1/3 [=========>------------------] Generating Stories...
1/1 [============================] Creating stories for SB-Test...
2/2 [============================] Creating stories for blast-demo...
2/2 [============================] Stories created. Run blast:launch to init Storybook.
2/3 [==================>---------] Publishing FE assets.
Copied Directory [\vendor\area17\blast\public] To [\public\blast]
Publishing complete.
3/3 [============================] Setup Complete. Booting Storybook and watching stories.
Symfony\Component\Process\Exception\ProcessFailedException
The command "npm run storybook" failed.
Exit Code: 1(General error)
Working directory: C:\git-repos\dashboards\vendor/area17/blast
Output:
@area17/blast@1.0.0 storybook
concurrently "start-storybook --quiet -s $STORYBOOK_STATIC_PATH -p 6006" "npm run watch-components" "npm run watch-data"
Error Output:
'concurrently' is not recognized as an internal or external command,
operable program or batch file.
at C:\git-repos\dashboards\vendor\symfony\process\Process.php:270
266▕ */
267▕ public function mustRun(callable $callback = null, array $env = []): self
268▕ {
269▕ if (0 !== $this->run($callback, $env)) {
➜ 270▕ throw new ProcessFailedException($this);
271▕ }
272▕
273▕ return $this;
274▕ }
1 C:\git-repos\dashboards\vendor\area17\blast\src\Traits\Helpers.php:27
Symfony\Component\Process\Process::mustRun()
2 C:\git-repos\dashboards\vendor\area17\blast\src\Commands\Launch.php:135
A17\Blast\Commands\Launch::runProcessInBlast()
PS C:\git-repos\dashboards>
@RobertAByrnes You may need to reinstall dependencies. Try running php artisan blast:launch --install to force it to reinstall all of your dependencies before launching Storybook or any of the watch tasks.
@mrtimbrook apologies, that did the trick. I would love the ability to view the code in docs view as with the main storeybook.js, I think this would be winning feature for use in our team, Do you have a lead time in mind for Blast 1.4? :)
A code view is definitely on my radar, I just need to research it a little more to see if it's something we can enable in Storybook Server (it may be something that Storybook server doesn't support) or if it's something we need to build in Blast.
Can you open a new issue for it and we can discuss it there? I am more than happy to review/collaborate on a PR if you have any ideas. Thanks!