Laravel (Nginx, EC2) + Vue.js (S3bucket, CloudFront) - CORS errors - laravel

Question

I got stuck with a bit of problem since I deployed to production. I am facing constant CORS error and error code 500 (internal error) whenever I try to 'upload' image to s3 bucket.
Access to XMLHttpRequest at 'https://api.example.co.uk/api/user/7/update' from origin 'https://www.example.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
To upload images I am using Storage::disk('s3')->putFileAs.
filesystems.php
's3' => [
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
],
In my case I do not provide AWS_ENDPOINT and AWS_USE_PATH_STYLE_ENDPOINT is set to FALSE.
Current architectural setup is as follows:
Vue.js (2) lives in S3Bucket and is served as static website via CloudFront (+SSL from AWS)
Laravel lives in EC2 instance and is served by nginx (+SSL via letsencrypt)
Both live under same domain, however Laravel is served under subdomain. We've got https://www.example.co.uk for frontend and https://api.example.co.uk for backend.
Domain registered with GoDaddy, however I moved DNS to Route53.
cors.php
'paths' => [
'api/*',
'sanctum/csrf-cookie',
'broadcasting/auth'
],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:8080', 'https://www.example.co.uk', 'https://example.co.uk'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => ['*'],
'max_age' => 0,
'supports_credentials' => true,
];
S3bucket is open to the public, with policy that allow to getObjects. Same bucket got following cors setup (probably not safest but I just want to first make it work)
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD",
"PUT",
"POST"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"Access-Control-Allow-Origin",
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
],
"MaxAgeSeconds": 3000
}
]
CloudFront Behavior is to Redirect HTTP to HTTPS
Allowed HTTP methods are: GET, HEAD, OPTIONS
Cache Policy is my custom policy to attach following headers:
Origin
Access-Control-Request-Method
Access-Control-Allow-Origin
Access-Control-Request-Headers
Origin Request Policy - CORS-S3Origin
Response Headers Policy - CORS-With-Preflight
Nginx api.example.co.uk.conf file
server {
listen 80 default_server;
listen [::]:80 default_server;
listen 443 ssl;
server_name api.example.co.uk www.api.example.co.uk;
ssl_certificate /etc/letsencrypt/live/api.example.co.uk/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/api.example.co.uk/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
location / {
try_files $uri $uri/ /index.php; # /index.php$is_args$args; # =404;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php8.1-fpm.sock;
}
# deny access to .htaccess, if Apache's document root
# concurs with nginx's one
location ~ /\.ht {
deny all;
}
}
If any more information necessary please let me know and please bear in mind that everything works on localhost, problem appeared after deployment.
Moreover, I am not getting any CORS errors for other paths, the only CORS error happens when I explicitly 'upload' images to s3 bucket.
I would appreciate any help with that, as I've been stuck with it for past two days now and I am sure its something silly.
EDIT
Might be worth noting that Storage::url() returns error 500 (cors) as well.
Another important info might be that I have two buckets.
One bucket www.example.co.uk contains the static website and is served with cloudFront.
The other bucket example-live-bucket is the one where I am trying to store files.