Laravel 9 + Vue 3 got Cross-Origin Request Blocked when access laravel public folder on Localhost

Question

i want to ask something, I'm learning to develop app with laravel 9 & vue 3. in the file upload section using filepond.

<file-pond
                  name="test"
                  ref="pond"
                  label-idle="Drop files here..."
                  v-bind:allow-multiple="false"
                  accepted-file-types="image/jpeg, image/png"
                  v-on:change="cobaaaaa"
                  v-bind:files="model.file_upload_url"
                />

but when go to edit page the preview file got

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at mylaravelpulicfolder (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

like in this image my-cors-error. when i click the link its work and show the image. I already search this error case and got the answer use add-on like firefox "CORS Everywhere". the question:

1. Is there a way to fix cors when accessing the Laravel public folder without using an add on?
2. Does this cors only occur on localhost (development mode), after i hosting app there is no error? because in the future i dont want the user who uses it must download the add-on.

I've tried:

1.using fruitcake/laravel-corsand.

2.editing the htaccess in the public folder like adding this line.

Header always set Access-Control-Allow-Origin "*"

3.Editing the index.php in the public folder like adding this line.

    $allowA = array('http://127.0.0.1:8000', 'http://127.0.0.1:5173');
    if(isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] != ''){
        foreach ($allowA as $allow) {
            # code...
            if(preg_match('#'.$allow.'#', $_SERVER['HTTP_ORIGIN'])){
                header('Acess-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
                header('Access-Control-Allow-Credentials: true');
                header('Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS');
                header('Access-Control-Max-Age: 1728000');
                header('Access-Control-Allow-Headers: Origin,Content-Type,X-Auth-Token,Authorization,X-Requested-With,Content-Range,Content-Disposition,Content-Description,x-xsrf-token,ip');
                break;
            }
        }
    }

. :8000 is my laravel api and :5173 is my Vue Front End use Vite. still doesn't work. i expecting the answer if this cors is only occur when development mode or still when i up my app to hosting.

Thank you for taking the time to read my question

Answer 1

I resolved this error and this is not FilePond error. This error comes from your Laravel or local server configuration. From Laravel version 9.2 we have https://github.com/fruitcake/laravel-cors package implemented into Laravel core files. You will have to make proper CORS configuration.

If you are using Apache https://enable-cors.org/server_apache.html

If you are using nginx https://enable-cors.org/server_nginx.html

and this will gonna work as expected.