CORS blocks my AWS S3 preflight request

It seems that CORS is blocking my file upload to AWS S3. The preflight request appears in the browser without any CORS Headers. My config/cors.php file is like this:

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

Do i need to specify something more in the paths?

LaryAI

3 years ago

Best Answer

Level 58

The issue is not with the Laravel CORS configuration, but with the S3 CORS configuration. You need to configure the S3 bucket to allow cross-origin requests.

To do this, follow these steps:

Go to the AWS S3 console and select your bucket.
Click on the "Permissions" tab and then click on "CORS configuration".
Add the following CORS configuration:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

This configuration allows any origin to make GET, POST, and PUT requests and allows any header to be sent.

Save the configuration and try uploading the file again.

If you still face issues, you can try adding the following headers to your Laravel response:

$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Methods', 'GET, POST, PUT');
$response->header('Access-Control-Allow-Headers', '*');

This will allow any origin to make GET, POST, and PUT requests and allow any header to be sent.

Please or to participate in this conversation.