Cloudfront 将 JavaScript 文件作为 Mime 类型的 Text/plain 提供服务答案

【问题标题】：Cloudfront serving javascript files as Mime type of Text/plainCloudfront 将 JavaScript 文件作为 Mime 类型的 Text/plain 提供服务
【发布时间】：2021-08-27 18:51:22
【问题描述】：

静态托管在 S3 上的 Vue 应用程序正在通过 HTTP 正确地提供 JS 文件，但是当通过链接的 CloudFront URL 访问该站点时，该应用程序不会加载，因为 javascript 作为文本类型从服务器接收。我可以更改任何设置来解决此问题吗？如果您能提供帮助，非常感谢。 dist 文件夹中的 index.html 源代码：

    <link rel="stylesheet" href="/font/inter.css" />
  <script type="module" crossorigin src="/assets/index.74e9a26f.js"></script>
  <link rel="modulepreload" href="/assets/vendor.cb99a641.js">
  <link rel="stylesheet" href="/assets/index.7303d77a.css">
</head>
  <body>
    <div id="app"></div>

HTTP site directly to S3

Same settings but on cloudfront HTTPS link

【问题讨论】：

您是否正在使用 Lambda@Edge？
不，先生，绝对不是
你能做一个head-object，它显示什么？
谢谢，这是个好主意...{ "AcceptRanges": "bytes", "LastModified": "2021-06-10T18:13:05+00:00", "ContentLength": 3202, "ETag": "\"a29ad9288c21e2c6a59014babf58c67a\"", "ContentType": "text/plain", "Metadata": {}.......所以我想这可能是问题所在？如何更改存储桶中文件的内容类型？为什么它在 HTTP 版本上运行良好？ }
现在可以使用了！！！呜呼。谢谢！我的第一个堆栈溢出问题是成功的

标签： javascript amazon-web-services vue.js https mime-types

【解决方案1】：

jellycsc 解决了我的问题。我只需要在 S3 控制台中手动将系统定义的内容类型从 text/plain 更改为 application/javascript，然后确保缓存在我的浏览器上失效并刷新。

【讨论】：