AWS S3与CloudFront部署异常：解压后HTML被浏览器下载而非显示

嘿，我来帮你捋清楚这个问题！你遇到的HTML文件被浏览器识别为未知类型触发下载的情况，核心原因基本都是Content-Type响应头设置不正确，结合你的S3+Lambda+CloudFlow流程，我给你梳理几个关键排查和修复步骤：

1. 检查Lambda解压后上传到S3的文件Content-Type #

Lambda在把解压后的文件上传到S3时，很可能没有设置正确的Content-Type，默认会使用binary/octet-stream——这个类型会让浏览器认为是可下载的二进制文件，而不是可渲染的HTML。

修复方案： #

在你的Lambda代码中，处理解压后的每个文件时，根据文件扩展名设置对应的Content-Type。比如用Node.js的Lambda可以借助mime-types库自动识别：

const mime = require('mime-types');
const AWS = require('aws-sdk');
const s3 = new AWS.S3();

// 处理解压后的文件并上传到S3
const processUnzippedFile = async (targetBucket, targetKey, fileContent) => {
  // 根据文件路径获取对应的Content-Type
  const contentType = mime.lookup(targetKey) || 'application/octet-stream';
  
  await s3.putObject({
    Bucket: targetBucket,
    Key: targetKey,
    Body: fileContent,
    ContentType: contentType, // 关键：设置正确的类型
    ACL: 'public-read' // 确保文件有公开访问权限
  }).promise();
};

你也可以先手动验证：到S3控制台找到解压后的index.html，查看它的属性，确认Content-Type是不是text/html。如果不是，手动修改后再用CloudFront访问试试，看是否恢复正常。

2. 强制刷新CloudFront缓存 #

就算你已经修正了S3文件的Content-Type，CloudFront可能还缓存着旧的错误响应头。这时候需要创建无效化请求清除缓存：

• 打开CloudFront控制台，找到你的分发
• 切换到无效化标签页，点击创建无效化
• 在路径里输入/*（或者具体的/你的子文件夹/index.html），然后提交请求

等待几分钟让无效化完成后，再重新访问页面测试。

3. 确认CloudFront默认根对象配置 #

如果你的index.html在子文件夹（比如unzipped/）里，要确保CloudFront的默认根对象设置正确：

• 打开CloudFront分发的编辑页面，在默认根对象里填写unzipped/index.html（替换成你的实际子文件夹路径）
• 这样用户访问CloudFront域名时，会自动指向这个子文件夹下的index.html

4. 检查S3静态网站托管（如果启用） #

如果你给S3桶开启了静态网站托管，要注意：

• 确保索引文档设置为index.html
• CloudFront的源要指向S3的静态网站域名（格式类似bucket-name.s3-website-region.amazonaws.com），而不是S3的REST API域名（bucket-name.s3.amazonaws.com）

附上你提供的前端上传代码（用于参考）：

<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 
  <title>AWS S3 File Upload</title> 
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <meta name="description" content="Serverless web application example"> 
  <meta name="author" content=""> 
  <link rel="stylesheet" href="css/reset.css"> 
  <link rel="stylesheet" href="css/reveal.css"> 
  <link rel="stylesheet" href="css/theme/black.css"> 
  <!-- Theme used for syntax highlighting of codes --> 
  <link rel="stylesheet" href="lib/css/monokai.css"> 
  <link rel="stylesheet" href="css/font.css"> 
  <link rel="stylesheet" href="css/normalize.css"> 
  <link rel="stylesheet" href="css/index.css"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css"> 
  <link rel="stylesheet" href="/css/ride.css"> 
  <link rel="stylesheet" href="/css/message.css"> 
</head> 
<body> 
  <input type="file" id="file-chooser" /> 
  <button id="upload-button">Upload to S3</button> 
  <div id="results"></div> 
  <script type="text/javascript"> 
    AWS.config.region = 'region'; // 1. Enter your region 
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
      IdentityPoolId: 'poolid' // 2. Enter your identity pool 
    }); 
    AWS.config.credentials.get(function(err) { 
      if (err) alert(err); 
      console.log(AWS.config.credentials); 
    }); 
    var bucketName = 'bucketname'; // Enter your bucket name 
    var bucket = new AWS.S3({ params: { Bucket: bucketName } }); 
    var fileChooser = document.getElementById('file-chooser'); 
    var button = document.getElementById('upload-button'); 
    var results = document.getElementById('results'); 
    button.addEventListener('click', function() { 
      var file = fileChooser.files[0]; 
      if (file) { 
        results.innerHTML = ''; 
        var objKey = file.name; 
        var params = { 
          Key: objKey, 
          ContentType: file.type, 
          Body: file, 
          ACL: 'public-read' 
        }; 
        bucket.putObject(params, function(err, data) { 
          if (err) { 
            results.innerHTML = 'ERROR: ' + err; 
          } else { 
            listObjs(); 
          } 
        }); 
      } else { 
        results.innerHTML = 'Nothing to upload.'; 
      } 
    }, false); 
    function listObjs() { 
      var prefix = 'testing'; 
      bucket.listObjects({ Prefix: prefix }, function(err, data) { 
        if (err) { 
          results.innerHTML = 'ERROR: ' + err; 
        } else { 
          var objKeys = ""; 
          data.Contents.forEach(function(obj) { 
            objKeys += obj.Key + "<br>"; 
          }); 
          results.innerHTML = objKeys; 
        } 
      }); 
    } 
  </script> 
  <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken"> 
    <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
          <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4> 
        </div> 
        <div class="modal-body"> 
          <textarea class="authToken"></textarea> 
        </div> 
        <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
      </div> 
    </div> 
  </div> 
  <script src="js/reveal.js?2"></script> 
  <script> 
    // More info about config & dependencies: 
    // - https://github.com/hakimel/reveal.js#configuration 
    // - https://github.com/hakimel/reveal.js#dependencies 
    Reveal.initialize({ 
      dependencies: [ 
        { src: 'plugin/markdown/marked.js' }, 
        { src: 'plugin/markdown/markdown.js' }, 
        { src: 'plugin/notes/notes.js', async: true }, 
        { src: 'plugin/highlight/highlight.js', async: true } 
      ] 
    }); 
  </script> 
  <script> 
    // More info https://github.com/hakimel/reveal.js#configuration 
    Reveal.initialize({ 
      controls: true, 
      progress: true, 
      center: true, 
      hash: true, 
      transition: 'slide', // none/fade/slide/convex/concave/zoom 
      // More info https://github.com/hakimel/reveal.js#dependencies 
      dependencies: [ 
        { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 
        { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 
        { src: 'plugin/highlight/highlight.js', async: true }, 
        { src: 'plugin/search/search.js', async: true }, 
        { src: 'plugin/zoom-js/zoom.js', async: true }, 
        { src: 'plugin/notes/notes.js', async: true } 
      ] 
    }); 
  </script> 
  <script src="js/vendor/jquery-3.1.0.js"></script> 
  <script src="js/vendor/bootstrap.min.js"></script> 
  <script src="js/vendor/aws-cognito-sdk.min.js"></script> 
  <script src="js/vendor/amazon-cognito-identity.min.js"></script> 
  <script src="https://js.arcgis.com/4.3/"></script> 
  <script src="js/config.js"></script> 
  <script src="js/cognito-auth.js"></script> 
  <script src="js/esri-map.js"></script> 
  <script src="js/ride.js"></script> 
</body> 
</html>

内容的提问来源于stack exchange，提问作者wl1