Why are browsers refusing to load my .js files and complaining about MIME types?

Question

Solution:

I should have spotted this earlier. Anyone following the book (or something similar) may be helped by this:

I had put the files under the wrong "static" directory: [project directory]/static, rather than [project directory]/lists/static, where "lists" is the name of the created Django "app". I was misled by the fact that there was a base.css file (which was being loaded) in both these "static" directories.

---

I'm trying to learn Django from a (very good) book .

It's just got to thechapter where some Javascript is being added. I am not really a newb when it comes to Javascript.

But I've hit the complete buffers with this.

We are told to put these lines towards the end of our Django template file base.html:

<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/list.js"></script>

<script>
  initialize(); // NB this is a simple function in the list.js script
</script>

NB for clarification, I am running this in a browser using the Django Development server. The functional tests which fail, contrary to what the book says should happen, are using django.contrib.staticfiles.testing.StaticLiveServerTestCase .

All the browsers I've tried (Firefox, Chrome, Opera) fail to load these JS files. In the case of Chrome (console) I get Status 404 for these two files, whereas two.css files in/under the same directory get Status 200. In the case of FF (v. 72) the console messages are slightly more cryptic: for both files the console first gives a baffling MIME-related message: "The script from “ http://localhost:8000/static/jquery-3.3.1.min.js ” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type." and then immediately afterwards says "Loading failed for the with source “ http://localhost:8000/static/jquery-3.3.1.min.js ” ."

I have done quite a bit of searching to find out what might be going on. I have tried lines like this in the Django template file in question:

<script type="text/javascript"  src="/static/jquery-3.3.1.min.js"></script>

<script LANGUAGE="JavaScript"  src="/static/jquery-3.3.1.min.js"></script>

<script type="application/javascript"  src="/static/jquery-3.3.1.min.js"></script>

... none of the above change anything.

The Django server I am running also says 404... but only for the JS files:

[19/Apr/2020 18:19:04] "GET / HTTP/1.1" 200 1451
[19/Apr/2020 18:19:05] "GET /static/jquery-3.3.1.min.js HTTP/1.1" 404 1670
[19/Apr/2020 18:19:05] "GET /static/base.css HTTP/1.1" 200 33
[19/Apr/2020 18:19:05] "GET /static/list.js HTTP/1.1" 404 1634
[19/Apr/2020 18:19:05] "GET /static/bootstrap/css/bootstrap.min.css HTTP/1.1" 200 117305
[19/Apr/2020 18:19:05] "GET /static/list.js HTTP/1.1" 404 1634

Suspecting I might be going out of my mind, I double-checked and treble-checked: these precise JS files, with these precise names, are indeed in the "static" directory in question.

I don't understand what this MIME stuff is all about and how it might block the loading of a JS file so dramatically. For what it's worth I checked the MIME types on my machine thus:

mike@M17A ~ $  grep 'js' /etc/mime.types
application/javascript              js
application/json                    json

I find it difficult to believe this is relevant, since I'm getting problems with all 3 browsers, but there is a "Learn more" link with the FF error messages, which leads here , where we read as follows:

Starting with Firefox 72, the opting out of MIME sniffing is also applied to top-level documents if a Content-type is provided. This can cause HTML web pages to be downloaded instead of being rendered when they are served with a MIME type other than text/html. Make sure to set both headers correctly.

Site security testers usually expect this header to be set.

My FF version? Yes, 72.

How does one actually "set a header"? Not that this is necessarily the solution... but it presumably can't hurt.

Edit following Sraw's comment
Chrome dev tools headers for jquery-3.3.1.min.js:

General
    Request URL: http://localhost:8000/static/jquery-3.3.1.min.js
    Request Method: GET
    Status Code: 404 Not Found
    Remote Address: 127.0.0.1:8000
    Referrer Policy: no-referrer-when-downgrade
Reponse Headers
    Content-Type: text/html
    Date: Sun, 19 Apr 2020 18:36:11 GMT
    Server: WSGIServer/0.2 CPython/3.6.10
Request Headers
    Accept: */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
    Cache-Control: no-cache
    Connection: keep-alive
    Cookie: csrftoken=Nhj1OavzFCQ3HYRmpWIdSlR595Y6hHGprY2sMUkLL5wzuIIDw1PjTx9fUfpVDnU8
    Host: localhost:8000
    Pragma: no-cache
    Referer: http://localhost:8000/
    Sec-Fetch-Mode: no-cors
    Sec-Fetch-Site: same-origin
    User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Answer 1

Posting this as an answer. Despite my embarrassment at making such a stoopid-level mistake.

I had put the files under the wrong "static" directory: [project directory]/static, rather than [project directory]/lists/static, where "lists" is the name of the created Django "app". I was misled by the fact that there was a base.css file (which was being loaded) in both these "static" directories.

I propose accepting this answer to keep the question, on the grounds that someone may be helped in future as one of several reasons why there may be problems loading JS files.

If enough people vote to close instead I shall delete everything!