CORS Configuration for NGINX and S3 Integration

We are currently working on integrating Amazon S3 with our NGINX server configuration, specifically for the /storage location. To ensure that we can load resources from both our own site and S3 without encountering CORS issues, we need your guidance on the correct CORS header configuration.

Could you please provide us with detailed instructions on how to set up the necessary CORS headers in NGINX? Specifically, we would like to know how to:

1. Allow requests from our website as well as the S3 bucket from the origin we setup in our websites
2. Specify the appropriate HTTP methods and headers that should be permitted.
3. Properly handle preflight requests.

Your expertise on this matter would be greatly appreciated, as we want to ensure a smooth integration without any CORS-related problems.

I already tray:

location /storage {
  # Proxy requests to your S3 bucket
  proxy_pass https://your-s3-bucket.s3.amazonaws.com;

  # Set CORS headers
  add_header 'Access-Control-Allow-Origin' 'https://your-website.com https://your-s3-bucket.s3.amazonaws.com';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' '*';
  add_header 'Access-Control-Allow-Credentials' 'true';

  # Handle preflight requests
  if ($request_method = OPTIONS) {
    add_header 'Access-Control-Allow-Origin' 'https://your-website.com https://your-s3-bucket.s3.amazonaws.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Content-Length' 0;
    return 204;
  }
}

o also tray with caddy this config:

# CORS Config Block Directive
(cors) {
    @cors_preflight {
        method OPTIONS
    }
    @corsOrigin {
        header_regexp Origin ^https?://({$AWS_CUSTOM_DOMAIN}|[a-zA-Z0-9-]+\.)*{$AWS_BUCKET}\.{$AWS_REGION}\.{$AWS_ENDPOINT}$|^https?://localhost(:[0-9]+)?$|^https?://({$DOMAIN_WHITELIST})$
    }

    handle @cors_preflight {
        header {
            Access-Control-Allow-Origin "{http.request.header.Origin}"
            Access-Control-Allow-Credentials true
            Access-Control-Allow-Headers "*"
            Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE"
            Access-Control-Max-Age "3600"
            Vary Origin
            defer
        }
        respond "" 204
    }

    handle @corsOrigin {
        header {
            Access-Control-Allow-Origin "{http.request.header.Origin}"
            Access-Control-Allow-Credentials true
            Access-Control-Expose-Headers "*"
            Vary Origin
            defer
        }
    }
}

then:

www.exemple.com
      # Reverse Proxy
      handle {
            encode zstd gzip
			import cors
            reverse_proxy localhost:8080 {
                  header_up X-Forwarded-Port {http.request.port}
                  header_up X-Real-IP {remote_host}
            }
      }

in

.env

DOMAIN_WHITELIST="www.exemple.com|onesignal.com|google.com|www.google.com|youtube.com|www.youtube.coms|s3.us-east-005.backblazeb2.com"
################################################################################
### AWS/CDN-SPECIFIC SETTINGS
################################################################################

# The name of your AWS S3 bucket (or equivalent bucket name for another provider)
# Example: "your_bucket_name"
AWS_BUCKET=mybucket

# The endpoint for your bucket (Amazon S3 or alternative services like Wasabi, Backblaze, etc.)
# Example: "s3.us-east-1.amazonaws.com"
AWS_ENDPOINT=s3.us-east-005.backblazeb2.com

# The region where your bucket is located
# Example: "us-east-1"
AWS_REGION=us-east-005

but I have a message in google chrome from CORB blocking requests

Thank you for your help!

Best regards,