How to solve this error of including external js in my HTML?

Question

I have an HTML document that is working except the js external file is not loading. Here is the HTML

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#1f1f1f">
    <meta charset="UTF-8" />
    <link type="text/css" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>some text</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

I get the following error in the console

The resource from “http://localhost:8000/js/app.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

My app.js is located in the js directory, so the problem is that the file doesn't exist. But I don't know what it means by MIME type and nosniff.

And what does your network tab say? Because that looks like it's sending an HTML file instead of a JS file (which is typically the case if the server is set up to send a 404 HTML page) but forgets to send it with the 404 status code, which tells the browser this is a not-found error, and is instead sending a status code 200, which tells the browser this is a perfectly fine request and the response is HTML data. Which is incredibly wrong. So: what does your server code look like? — Mike 'Pomax' Kamermans, Mar 14 '20 at 17:47
It says the following Status: 200 Method: GET Domain: localhost8000 File: app.js Cause: script Type: html — Sylvestaro, Mar 14 '20 at 18:48
yes, exactly: if your file doesn't exist it should _never_ generate a 200, so _what does your server code look like_? What code have you written for serving .js files from your `/js/` directory? Which server are you even using? etc. — Mike 'Pomax' Kamermans, Mar 14 '20 at 18:49

score 0 · Answer 1 · answered Mar 15 '20 at 05:21

A MIME type is just the type of file your computer is trying to use. When you open an image, such as a JPG or PNG file, the computer looks up those file extensions in it's MIME type lookup, and knows it needs to open them with an image processing program. Text files are opened with a text editor, and so on, as with JavaScript files. So your server is trying to serve a JavaScript file and isn't correctly configured to do so.

Fortunately, the server is telling you what's wrong and where to look to fix it:

"Setting a server's X-Content-Type-Options HTTP response header to nosniff instructs browsers to disable content or MIME sniffing which is used to override response Content-Type headers to guess and process the data using an implicit content type."

A more thorough explanation can be found here: What is "X-Content-Type-Options=nosniff"?

How to solve this error of including external js in my HTML?

1 Answers1