Search code examples
javascriptvue.jsamazon-s3httpsamazon-cloudfront

AWS Cloudfront serving javascript modules as wrong MIME type( "Text/Plain")


I have a Vue app hosted on an Amazon S3 bucket. It is loading great when accessed via the S3 link w/http. When I visit the site via a custom SSL domain link to cloudfront the javascript isn't served correctly. the JS files are fully accessible via https in the browser, but don't execute in the browser, leaving me with a blank page. I'm getting the following error for both javascript links in the index.html:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

also: I was following the instructions here: https://levelup.gitconnected.com/deploying-vue-js-to-aws-with-https-and-a-custom-domain-name-3ae1f79fe188


Solution

  • Figured it out, I just had to manually change the system-defined content type in the S3 console for the individual js objects from text/plain to application/javascript, then make sure the cache was invalidated and refreshed on my browser.