MIME type mismatch without “charset=utf-8” in <script> tag, error with “charset=utf-8” in <script> tag

Question

I've deployed an app to heroku. My Javascript code is in a file called main.js. In my index.html file, I point to it like this:

<script type='text/javascript' src='js/main.js'></script>

This causes the following error: "The resource from “ https://myfreshair.herokuapp.com/js/main.js ” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)."

If I change the tag to read:

<script type='text/javascript;charset=utf-8' src='js/main.js'></script>

...I don't get that error. Instead, my code results on an error on its first line. It works fine locally.

Answer 1

I fixed this by pointing express to my static files with the following line of code:

app.use(express.static('app'));

Previously, this line read something like:

app.use(express.static('js'));