I’m encountering a specific CORS issue (please refer to the attached image for details). My application, built on a microservice architecture, utilizes Laravel for the backend and single-spa for the micro-frontend. I’m employing Vite for all micro-frontends and FilePond for image upload and preview. The image upload and retrieval of the image file URL are functioning correctly, but a specific CORS error is hindering the image from being displayed.
I’m uncertain about where to place the CORS header, whether in the API or the front end. Please see the attached screenshot for the issue. I would appreciate any assistance with this.
My expectation is for the image to be displayed when FilePond loads the image URL, without any CORS errors.
2
Answers
I solved my problem, I need to add htaccess in public subfolder screenshot with the value of:
Thank you guys
You’ll need to configure the CORS header on the listening server, either in Laravel itself or in the webserver.
The easiest thing to do is probably add the cors headers to your webserver configuration. For apache (what you’re likely using), either in the server config itself or the apache config overall, but only place it in one place. Duplicate headers will cause a different error.
If using apache, in your server configuration you need to add
Header set Access-Control-Allow-Origin "*"
within the site configuration.