READ: https://laravelquestions.com/2021/02/17/how-to-disable-cors-for-laravel-storage-urls-using-fetch-api/
-------
I have a Laravel backend project and multiple ReactJS applications accessing to it through API calls. I have no problem with those because I configured config/cors.php to recieve requests to ‘api/‘ from any origin. Also tried to add ‘storage/‘ to paths, but it didn’t work:
'paths' => ['api/*', 'storage/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => ['*'],
'max_age' => 0,
'supports_credentials' => false,
I’m using axios to perform the api calls.
My problem is that I’m using Material-UI Dropzone and it uses ‘fetch API’ to get the images from any link. I tried to use a facebook URL and it worked!
Fetch facebook image
But when I try to fetch an image that is on Laravel Storage it gives me this error::
Screenshot of the request to laravel storage
I’ve already link the ‘storage’ to ‘public’ with ‘php artisan storage:link’, everything works fine. The image is returned when I try to access the URL through the browser.
I tried adding {mode: ‘no-cors’} to the fetch method and it returns the image on the request! But doesn’t load it on the component:
Image fetched with no-cors but not shown in dropzone
Why Facebook images are retrieved correctly but not my images from the storage?