Amazon S3 下载 index.html 而不是提供服务答案

【问题标题】：Amazon S3 downloads index.html instead of servingAmazon S3 下载 index.html 而不是提供服务
【发布时间】：2013-08-20 06:01:10
【问题描述】：

我已设置 Amazon S3 来为我的静态站点 speakeasylinguistics.com 提供服务。所有 DNS 内容似乎都可以正常工作，因为 dig +recurse +trace www.speakeasylinguistics.com 输出了正确的 DNS 信息。

但是当您visit the site in a browser 使用端点时，index.html 页面会下载，而不是被提供。我该如何解决这个问题？

我尝试过 Chrome、Safari、FF。它发生在所有人身上。我使用Amazon's walkthrough 将自定义域托管到 T。

【问题讨论】：

对文件运行 curl -I 返回：标题中的Content-Disposition: attachment - 这就是导致问题的原因。我认为在文件的元数据中。
我解决了在将 html 文件上传到 S3 时指定元数据 (content-type = text/html) 的问题

标签： amazon-s3

【解决方案1】：

针对您发布的网址运行 curl -I 会得到以下结果：

curl -I http://speakeasylinguistics.com.s3-website-us-east-1.amazonaws.com/
HTTP/1.1 200 OK
x-amz-id-2: DmfUpbglWQ/evhF3pTiXYf6c+gIE8j0F6mw7VmATOpfc29V5tb5YTeojC68jE7Rd
x-amz-request-id: E233603809AF9956
Date: Sun, 18 Aug 2013 07:58:55 GMT
Content-Disposition: attachment
Last-Modified: Sun, 18 Aug 2013 07:05:20 GMT
ETag: "eacded76ceb4831aaeae2805c892fa1c"
Content-Type: text/html
Content-Length: 2585
Server: AmazonS3

这行是罪魁祸首：

Content-Disposition: attachment

如果您使用的是 AWS 控制台，我相信这可以通过在 S3 中选择文件并通过删除此属性来修改其元数据来更改。

【讨论】：

我在没有定义“Content-Disposition”参数的情况下面临这个问题。但是，我注意到这个设置content-type: application/x-directory; charset=UTF-8，我怀疑这可能是问题所在。有没有办法把它改成text/html ？
如何删除属性？

【解决方案2】：

如果您使用Hashicorp Terraform，您可以在aws_s3_bucket_object 上指定content-type，如下所示

resource "aws_s3_bucket_object" "index" {
  bucket = "yourbucketnamehere"
  key = "index.html"
  content = "<h1>Hello, world</h1>"

  content_type = "text/html"
}

这应该会在浏览器中适当地提供您的内容。

【讨论】：

感谢您提及 Terraform！
Terraform 文档应该提到过。
terraform def 没有明确提到这一点。谢谢你！
这正是我需要的，谢谢。还要补充一点，由于某些缓存，如果继续重试网站端点，问题似乎仍然存在。尝试在隐身或清除缓存后执行此操作，它将在浏览器上提供内容。
这正是我想要的。

【解决方案3】：

如果您以编程方式执行此操作，则可以在上传中设置 ContentType 和/或 ContentDisposition 参数。

[PHP 示例]

      $output = $s3->putObject(array(
          'Bucket' => $bucket,
          'Key' => md5($share). '.html',
          'ContentType' => 'text/html',
          'Body' => $share,
      ));

putObject Docs

【讨论】：

【解决方案4】：

如果你们尝试使用 Boto3 和 python 3.7 或更高版本上传，请尝试使用

s3 = boto3.client('s3')
S3.upload_file(local_file,bucket,S3_file,ExtraArgs={'ContentType':'text/html'})

用于更新内容类型

【讨论】：

【解决方案5】：

对于遇到此问题的其他人，您可以在Properties > Static website hosting 下找到 URL 中的拼写错误。例如，提供的 URL 是

http://{bucket}.s3-website-{region}.amazonaws.com

但应该是的

http://{bucket}.s3-website.{region}.amazonaws.com

注意website 和region 之间的.。

【讨论】：

【解决方案6】：

我最近遇到了同样的问题，问题是 CloudFront 和 S3 Origin 的行为发生了变化，如果您的 S3Bucket 配置为服务于静态网站，您需要将您的来源更改为 HTTPS:// 端点，而不是从下拉列表中选择 S3 来源，如果您使用的是 terraform，您的来源应该是 aws_s3_bucket.var。website_endpoint 而不是 aws_s3_bucket.var.bucket_domain_name

参考AWS documentation here

【讨论】：

【解决方案7】：

我最近遇到了这个问题，根本原因似乎是启用了对象版本控制。在存储桶上禁用版本控制后，索引 HTML 按预期提供。

【讨论】：

【解决方案8】：

从 NodeJS 上传到 S3 静态站点时，我遇到了同样的问题。正如其他人所提到的，该问题是由于上传文件时缺少content-type 引起的。使用网页界面时，会自动为您申请content-type；但是，手动上传时，您需要指定它。 List of S3 Content Types.

在 NodeJS 中，您可以像这样附加内容类型：

const { extname } = require('path');
const { createReadStream } = require('fs');

// add more types as needed
const getMimeType = ext => {
    switch (ext) {
        case '.js':
            return 'application/javascript';
        case '.html':
            return 'text/html';
        case '.txt':
            return 'text/plain';
        case '.json':
            return 'application/json';
        case '.ico':
            return 'image/x-icon';
        case '.svg':
            return 'image/svg+xml';
        case '.css':
            return 'text/css'
        case '.jpg':
        case '.jpeg':
            return 'image/jpeg';
        case '.png':
            return 'image/png';
        case 'webp':
            return 'image/webp';
        case 'map':
            return 'binary/octet-stream'
        default:
            return 'application/octet-stream'    
    }
};

(async() => {
    const file = './index.html';
    const params = {
        Bucket: 'myBucket',
        Key: file,
        Body: createReadStream(file),
        ContentType: getMimeType(extname(file)),
    };
    await s3.putObject(params).promise();
})();

【讨论】：

【解决方案9】：

如果您使用的是AWS S3 Bitbucket Pipelines Python，则添加参数content_type如下：

s3_upload.py

def upload_to_s3(bucket, artefact, bucket_key, content_type):
...

def main():
...
    parser.add_argument("content_type", help="Content Type File")
...

if not upload_to_s3(args.bucket, args.artefact, args.bucket_key, args.content_type):

修改bitbucket-pipelines.yml如下：

...
- python s3_upload.py bucket_name file key content_type 
...

其中 content_type 参数可以是以下之一：MIME types (IANA media types)

【讨论】：

【解决方案10】：

我遇到了同样的问题，我已经通过这种方式解决了。在 S3 Bucket，单击 o index.html 复选框，单击 con Actions 选项卡，编辑元数据，您会注意到在元数据选项中显示“类型：系统定义，键：内容类型，值：二进制/八位字节流”。更改 Value 并输入“html”并保存更改。然后点击index.html，“打开”按钮。这对我有用。

【讨论】：