AWS Cloudfront 将 JavaScript 模块作为错误的 MIME 类型(“Text/Plain”)提供服务

Posted

技术标签:

【中文标题】AWS Cloudfront 将 JavaScript 模块作为错误的 MIME 类型(“Text/Plain”)提供服务【英文标题】:AWS Cloudfront serving javascript modules as wrong MIME type( "Text/Plain") 【发布时间】:2021-08-27 12:37:42 【问题描述】:

我有一个托管在 Amazon S3 存储桶上的 Vue 应用程序。通过带有 http 的 S3 链接访问时,它的加载效果很好。当我通过指向 cloudfront 的自定义 SSL 域链接访问该站点时,javascript 未正确提供。 JS文件可以通过浏览器中的https完全访问,但不要在浏览器中执行,给我留下一个空白页面。我在 index.html 中的两个 javascript 链接都收到以下错误:

加载模块脚本失败:需要一个 JavaScript 模块脚本,但是 服务器以“text/plain”的 MIME 类型响应。严格的 MIME 根据 HTML 规范对模块脚本强制执行类型检查。

另外:我按照这里的说明进行操作:https://levelup.gitconnected.com/deploying-vue-js-to-aws-with-https-and-a-custom-domain-name-3ae1f79fe188

【问题讨论】:

【参考方案1】:

想通了,我只需要在 S3 控制台中手动将各个 js 对象的系统定义内容类型从 text/plain 更改为 application/javascript,然后确保缓存无效并在我的浏览器上刷新。

【讨论】:

【参考方案2】:

如果通过 aws 命令行工具上传,您可以通过注册表编辑使其上传具有正确 mime/内容类型的 javascript 文件。

修改注册表项

HKEY_CURRENT_USER\SOFTWARE\Classes.js

将“内容类型”设置为“应用程序/javascript”

注意:最后一次 Windows 更新(截至 2022 年 1 月 14 日)悄悄将此注册表项恢复为“text/plain”。

【讨论】:

以上是关于AWS Cloudfront 将 JavaScript 模块作为错误的 MIME 类型(“Text/Plain”)提供服务的主要内容,如果未能解决你的问题,请参考以下文章

将 AWS CloudFront CDN 放在 squarespace 网站前面需要哪些设置?

AWS:如何为自定义域名配置 Cloudfront

将 AWS cloudfront 放在 ec2 前面会引发 502 错误

AWS SOC 2 API 网关 / CloudFront

如何将 AWS CloudFront 和 API Gateway 并排用于同一个域?

如何使用 C# HttpClient 或 AWS SDK 通过 CloudFront 将视频上传到 S3