AWS S3中HTML对象被浏览器下载而非渲染的解决方法求助

问题背景 #

已通过Terraform创建名为helloworld.com的S3存储桶，并上传index.html对象，配置了content_type = "text/html"，但通过对象URL访问时浏览器会下载文件而非直接渲染。

现有Terraform配置 #

存储桶配置：

resource "aws_s3_bucket" "bucketA" {
  provider = aws.route53_role
  bucket = "helloworld.com"

  tags = {
    Name        = "domain-bucket00"
    Environment = "test"
  }
}

对象上传配置：

resource "aws_s3_object" "bucketA-index" {
  provider = aws.route53_role
  key        = "index.html"
  bucket     = aws_s3_bucket.bucketA.id
  source     = "index.html"
  content_type = "text/html"
}

解决方案 #

1. 为对象添加Content-Disposition响应头 #

在aws_s3_object资源中新增content_disposition = "inline"，强制浏览器以内联方式渲染内容，而非触发下载：

resource "aws_s3_object" "bucketA-index" {
  provider = aws.route53_role
  key                = "index.html"
  bucket             = aws_s3_bucket.bucketA.id
  source             = "index.html"
  content_type       = "text/html"
  content_disposition = "inline" # 强制浏览器内联渲染
}

2. 配置S3静态网站托管（推荐） #

若需要更规范的HTML访问方式，建议启用S3静态网站托管，同时配置对应权限：

步骤1：启用静态网站托管

添加aws_s3_bucket_website_configuration资源开启托管：

resource "aws_s3_bucket" "bucketA" {
  provider = aws.route53_role
  bucket = "helloworld.com"

  tags = {
    Name        = "domain-bucket00"
    Environment = "test"
  }
}

resource "aws_s3_bucket_website_configuration" "bucketA-site" {
  provider = aws.route53_role
  bucket = aws_s3_bucket.bucketA.id

  index_document {
    suffix = "index.html"
  }
}

步骤2：配置公开访问权限

添加存储桶策略，允许公众读取静态网站内容：

resource "aws_s3_bucket_policy" "bucketA-policy" {
  provider = aws.route53_role
  bucket = aws_s3_bucket.bucketA.id
  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Principal = "*"
        Action = "s3:GetObject"
        Resource = "${aws_s3_bucket.bucketA.arn}/*"
      }
    ]
  })
}

配置完成后，通过S3静态网站端点（如http://helloworld.com.s3-website.ca-central-1.amazonaws.com）访问，浏览器会正常渲染HTML。

3. 刷新对象元数据（处理缓存问题） #

若之前已上传过该对象，可能存在元数据缓存，需先销毁旧对象再重新创建：

terraform destroy -target=aws_s3_object.bucketA-index
terraform apply

内容的提问来源于stack exchange，提问作者Jenia Be Nice Please