extjac's avatar

FilePond, Laravel & CORS (not sure Laravel issue)

I am using FilePond to upload profile images, logos, etc to AWS S3. All seems to be working ok with the Upload.

However, when I try to load the image from the DB/S3 into FilePond and show the image already upload I get a CORS error issue.

I am not sure this is related to Laravel of FilePond...but i was wondering if someone had the same issue

Error:

Access to XMLHttpRequest at 'https://cdn-my-bucket-01.s3.us-east-2.amazonaws.com/public/temp/1638562907.jpg' from origin 'http://my-localhost.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Blade.

<input type="file" 
class="my-pond" 
name="avatar" 
id="avatar" 
data-max-file-size="5MB" 
data-max-files="1"
label-idle='<span class="filepond--label-action"> Browse </span>' 
instantUpload="false" 
accept="image/*"
/>

JavaScript


FilePond.registerPlugin( FilePondPluginImagePreview, FilePondPluginFileValidateSize, FilePondPluginImageResize, FilePondPluginImageTransform, FilePondPluginFileValidateType);

const inputElement = document.querySelector('input[type="file"]');

const pond = FilePond.create( inputElement );

pond.files = [{ 
   source: 'https://cdn-my-bucket-01.s3.us-east-2.amazonaws.com/public/temp/1638562907.jpg',
}];

pond.setOptions({
    server: {
        url : '{{ url("test") }}',
        process: '/upload',
        revert: '/deleted',        
        headers : {
            'X-CSRF-TOKEN' : '{{ csrf_token() }}'
        },    
    },
    imageResizeMode: 'contain',
    acceptedFileTypes: ['image/png', 'image/jpeg'],
    imagePreviewWidth: 1000,
    imagePreviewHeight: 300,
    imageCropAspectRatio: '1:1',
    imageResizeTargetWidth: 1000,
    imageResizeTargetHeight: 300,
}); 
  

Config / cors.php

    'paths' => ['api/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,
0 likes
7 replies
Tray2's avatar

You are running it from localhost and that is most likely the problem. To you have a domain that you can try it on?

extjac's avatar
extjac
OP
Best Answer
Level 6

@Snapey thank you sir! once again! the xml didn't work but this one did.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://my-local-site.local"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]
3 likes
egroeg's avatar

Since this ranks on google for keywords related to CORS, Laravel, Jetstream, etc, etc I wanted to share that an incorrect bucket name can also manifest with this error. Wanted to leave this note in the hopes it helps someone.

The CORS policy above is of course also necessary :-)

1 like
bionary's avatar

Also chiming in here as this headache cost me an hour of my Saturday morning. (And yes I realize it's a one year old post so spare me the <angry-coder-ridicule> )

My CORS error had to to with https protocol and nothing to do with nginx configs.

My server was serving images with image urls like: https://mysite.com/storage/myimage.jpg But I was browsing on a page with http:// such as: http://mysite.com

I had to force https redirection on the server so the http protocol could never be used. Life was good after that :) Hope this helps somebody.

Please or to participate in this conversation.