CORS Error when uploading to S3 compatiable bucket.

Github Repo: https://github.com/debjit/hackathon-bdd Branch: dev This issue is not present when uploading directly ex:

Storage::disk('bb2')->put('example1.txt', 'Contents');

Storage::disk('bb2')->put('example1.txt', 'Contents');

But when using "FileUpload::Make" getting CROS error, I have added CORS middleware and they do not have any use. It is not multi domain. Here is the fileupload code,

FileUpload::make('image')
  ->image()
  ->directory('requisitons')
  ->visibility('private')
  // ->visibility('public')
  ->openable()
  ->imageEditor(),

FileUpload::make('image')
  ->image()
  ->directory('requisitons')
  ->visibility('private')
  // ->visibility('public')
  ->openable()
  ->imageEditor(),

Here is the log

Access to XMLHttpRequest at 'https://s3.eu-central-003.backblazeb2.com/bdd-koyeb/livewire-tmp/RiFfkKZw37NGBiZKK3HEGmOUX5RCmC-metaT25lIFdlZWsgQm9vdGNhbXAucG5n-.png?x-amz-acl=private&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=003b0b8ac93b7790000000002%2F20230818%2Feu-central-003%2Fs3%2Faws4_request&X-Amz-Date=20230818T052110Z&X-Amz-SignedHeaders=host%3Bx-amz-acl&X-Amz-Expires=300&X-Amz-Signature=8f17e03ccd3bdd287877c88a5098554897f70b6223db0b2ba5e217cf42ffe005' from origin 'https://hackathon-bdd.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'https://s3.eu-central-003.backblazeb2.com/bdd-koyeb/livewire-tmp/RiFfkKZw37NGBiZKK3HEGmOUX5RCmC-metaT25lIFdlZWsgQm9vdGNhbXAucG5n-.png?x-amz-acl=private&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=003b0b8ac93b7790000000002%2F20230818%2Feu-central-003%2Fs3%2Faws4_request&X-Amz-Date=20230818T052110Z&X-Amz-SignedHeaders=host%3Bx-amz-acl&X-Amz-Expires=300&X-Amz-Signature=8f17e03ccd3bdd287877c88a5098554897f70b6223db0b2ba5e217cf42ffe005' from origin 'https://hackathon-bdd.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is the middleware code

public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);

        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
        $response->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

        return $response;
    }

public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);

        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
        $response->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

        return $response;
    }

GitHub

GitHub - debjit/hackathon-bdd: Donation Diary is an application tha...

Donation Diary is an application that makes blood donation straightforward. - GitHub - debjit/hackathon-bdd: Donation Diary is an application that makes blood donation straightforward.

20 Replies

Vp•16mo ago

Have you configure like this "FilePond requires files to be served from the same domain as the app, or the appropriate CORS headers need to be present" https://filamentphp.com/docs/3.x/forms/fields/file-upload#configuring-the-storage-disk-and-directory

File upload - Form Builder - Filament

DebjitOP•16mo ago

Yes I did setup env to FILAMENT_FILESYSTEM_DISK=bb2

DebjitOP•16mo ago

Here is blackblaze cors config file, and bucket settings

krekas•16mo ago

cors isn't a filament problem. it's your setup problem. there's plenty information how to set up cors in the internet. you need to search yourself for that

DebjitOP•16mo ago

Thanks buddy. So , I have did check and found no solution. Share the repo and all the information above. Still, here is my config information for config/cors.php

'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['https://hackathon-bdd.test/*','*'],

    'allowed_origins_patterns' => ['/https?:\/\/hackathon-bdd\.test\/?\z/'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['https://hackathon-bdd.test/*','*'],

    'allowed_origins_patterns' => ['/https?:\/\/hackathon-bdd\.test\/?\z/'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

krekas•16mo ago

no no no. cors are set in the s3 settings

cwbmuller•16mo ago

You set the CORS in s3 as mentioned. See example in the image

DebjitOP•16mo ago

Yes I think this is the same. Allowing everything everywhere.

DebjitOP•16mo ago

When directly uploading it is uploading to server but livewire is giving me problems I also added cors middleware

Dennis Koch•16mo ago

That should be unrelated to uploading to your Bucket. That's because it's uploading in the backend. CORS is a frontend issue

krekas•16mo ago

https://laraveldaily.com/lesson/laravel-api/what-is-cors

DebjitOP•16mo ago

Thank you for your reply. I have share the repo please let me know iof you found anything wrong. I love to hear from you. I did a lot of things but does not effect anything Anyone have this problem? This is not solved yet I do not have access to this link. And I do reserch before posting. Thanks for sharing.

krekas•16mo ago

Get a membership then. I think you would even more then. Can give you secret not so secret discount code

Dennis Koch•16mo ago

Not sure whether that helps when it’s about Backblaze settings. Those rules look fine. Haven’t used Backblaze so I don’t have an idea what the issue is.

Khushbu•16mo ago

@Debjit Did you find any solution? I am also facing the same issue?

Khushbu•16mo ago

@Debjit https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

CORS configuration - Amazon Simple Storage Service

Create an XML or JSON CORS configuration on your bucket.

Khushbu•16mo ago

This helps me to solve my error hope it will help you as well

Dennis Koch•16mo ago

It's AWS and not Backblaze. I think this issue is related to Backblaze. AWS was discussed and solved multiple times already.

Khushbu•16mo ago

DebjitOP•16mo ago

I am still searching for it. I will try another method, create a tip, and share what is going wrong.

Gaming

Programming

CORS Error when uploading to S3 compatiable bucket.