You are running it from localhost and that is most likely the problem. To you have a domain that you can try it on?
Dec 4, 2021
7
Level 6
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,
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
Please or to participate in this conversation.