Bucket CORS

CORS (Cross-Origin Resource Sharing) là cơ chế cho phép trình duyệt web thực hiện request đến một domain khác với domain của trang hiện tại. Khi ứng dụng web của bạn (chạy trên app.example.com) cần tải file trực tiếp từ bucket LANIT Cloud, bạn phải cấu hình CORS để trình duyệt không bị chặn bởi chính sách Same-Origin.

Khi nào cần cấu hình CORS?

• Upload file trực tiếp từ trình duyệt lên bucket (browser-side upload)
• Trang web hiển thị hình ảnh, video, font chữ từ bucket
• Ứng dụng SPA (React, Vue, Angular) gọi API S3 trực tiếp từ phía client
• Static website hosting cần load tài nguyên cross-domain

Truy cập cấu hình CORS

Bước 1: Vào Simple Storage → Buckets, chọn vào tên bucket cần cấu hình.

Bước 2: Chọn tab CORS trong phần quản lý bucket.

Bước 3: Chọn Cập nhật để thêm rule CORS mới. Điền các trường: Allowed Origins, Allowed Headers, Allowed Methods, Expose Headers, Max Age Seconds.

Cấu trúc CORS Configuration

Cấu hình CORS là một mảng JSON chứa các rule:

[
  {
    "AllowedOrigins": ["https://app.example.com"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag", "Content-Length"],
    "MaxAgeSeconds": 3000
  }
]

Giải thích các trường:

Trường	Bắt buộc	Mô tả
AllowedOrigins	✅	Danh sách domain được phép. Dùng "*" để cho phép mọi domain
AllowedMethods	✅	HTTP methods được phép: GET, PUT, POST, DELETE, HEAD
AllowedHeaders	❌	Headers được phép trong request. "*" = tất cả headers
ExposeHeaders	❌	Headers mà trình duyệt được phép đọc từ response
MaxAgeSeconds	❌	Thời gian (giây) trình duyệt cache kết quả preflight request

Các ví dụ cấu hình phổ biến

1. Cho phép mọi nguồn truy cập đọc (CDN, public assets)

Phù hợp cho bucket chứa ảnh, font, CSS công khai:

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 86400
  }
]

2. Upload trực tiếp từ trình duyệt (Presigned URL Upload)

Cho phép ứng dụng web upload file lên bucket sử dụng presigned URL:

[
  {
    "AllowedOrigins": [
      "https://app.example.com",
      "https://staging.example.com"
    ],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": [
      "Content-Type",
      "Content-MD5",
      "Authorization",
      "x-amz-date",
      "x-amz-content-sha256",
      "x-amz-security-token"
    ],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]

3. Môi trường phát triển (localhost)

Thêm localhost để phát triển và test trên máy local:

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "http://localhost:8080",
      "https://app.example.com"
    ],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag", "Content-Length", "Content-Type"],
    "MaxAgeSeconds": 3000
  }
]

4. Nhiều rule cho các use case khác nhau

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 86400
  },
  {
    "AllowedOrigins": ["https://admin.example.com"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]

Áp dụng cấu hình CORS

Bước 1: Nhập JSON cấu hình vào editor trên portal.

Bước 2: Chọn Save hoặc Apply CORS.

Bước 3: Cấu hình có hiệu lực ngay lập tức (có thể mất vài giây để propagate).

Xóa cấu hình CORS

Xóa toàn bộ nội dung trong editor và lưu lại với mảng rỗng [], hoặc dùng nút Remove CORS nếu có.

Kiểm tra CORS

Để kiểm tra CORS đã hoạt động, dùng curl để gửi preflight request:

curl -X OPTIONS \
  -H "Origin: https://app.example.com" \
  -H "Access-Control-Request-Method: GET" \
  -H "Access-Control-Request-Headers: Content-Type" \
  -v \
  https://ten-bucket.s3.lanit.com.vn/test-object.jpg

Response đúng sẽ chứa header:

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, HEAD

CORS chỉ áp dụng cho trình duyệt web. Các request từ server, AWS CLI, hay Rclone không bị ảnh hưởng bởi cấu hình CORS.

Tránh dùng "AllowedOrigins": ["*"] kết hợp với AllowedMethods bao gồm PUT/DELETE trên bucket chứa dữ liệu nhạy cảm — điều này cho phép bất kỳ website nào thực hiện thao tác ghi/xóa vào bucket của bạn.