為什么瀏覽器拒絕加載 my.js 文件並抱怨 MIME 類型？

Question

解決方案：

我應該早點發現這一點。 任何關注本書（或類似內容）的人都可能會因此得到幫助：

我把文件放在錯誤的“靜態”目錄下：[項目目錄]/static，而不是[項目目錄]/lists/static，其中“lists”是創建的Django“app”的名稱。 我被這兩個“靜態”目錄中都有一個 base.css 文件（正在加載）這一事實誤導了。

---

我正在嘗試從一本（非常好的）書中學習 Django 。

剛剛到了添加一些 Javascript 的章節。 談到 Javascript，我並不是真正的新手。

但我已經用這個達到了完整的緩沖區。

我們被告知將這些行放在 Django 模板文件 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>

請注意，我正在使用 Django 開發服務器在瀏覽器中運行它。 與書中所說的應該發生的相反，失敗的功能測試正在使用django.contrib.staticfiles.testing.StaticLiveServerTestCase 。

我嘗試過的所有瀏覽器（Firefox、Chrome、Opera）都無法加載這些 JS 文件。 在 Chrome（控制台）的情況下，這兩個文件的狀態為 404，而同一目錄中/下的兩個.css 文件的狀態為 200。在 FF（v. 72）的情況下，控制台消息略顯神秘：對於這兩個文件，控制台首先會給出一個令人費解的 MIME 相關消息： “來自“ http://localhost:8000/static/jquery-3.3.1.min.js 的腳本”即使其 MIME 類型（“text/ html”) 不是有效的 JavaScript MIME 類型。” 然后緊接着說“加載失敗的源“ http://localhost:8000/static/jquery-3.3.1.min.js ” 。

我已經做了很多搜索以找出可能發生的事情。 我在有問題的 Django 模板文件中嘗試過這樣的行：

<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>

...以上都沒有改變任何東西。

我正在運行的 Django 服務器也顯示 404... 但僅適用於 JS 文件：

[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

懷疑我可能會發瘋，我仔細檢查並反復檢查：這些精確的 JS 文件，具有這些精確的名稱，確實在有問題的“靜態”目錄中。

我不明白這些 MIME 的內容是什么，以及它如何如此顯着地阻止 JS 文件的加載。 值得我檢查我機器上的 MIME 類型：

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

我很難相信這是相關的，因為我在所有 3 個瀏覽器上都遇到了問題，但是有一個帶有 FF 錯誤消息的“了解更多”鏈接，該鏈接指向此處，我們在此處閱讀如下：

從 Firefox 72 開始，如果提供了 Content-type，則選擇退出 MIME 嗅探也適用於頂級文檔。 這可能會導致 HTML web 頁面在使用除 text/html 以外的 MIME 類型提供時被下載而不是被呈現。 確保正確設置兩個標題。

站點安全測試人員通常希望設置此 header。

我的FF版本？ 是的，72。

一個人實際上是如何“設置標題”的？ 並不是說這一定是解決方案......但它大概不會受到傷害。

按照 Sraw 的評論進行編輯
jquery-3.3.1.min.js 的 Chrome 開發工具標頭：

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

將此作為答案發布。 盡管我犯了如此愚蠢的錯誤而感到尷尬。

我把文件放在錯誤的“靜態”目錄下：[項目目錄]/static，而不是[項目目錄]/lists/static，其中“lists”是創建的Django“app”的名稱。 我被這兩個“靜態”目錄中都有一個 base.css 文件（正在加載）這一事實誤導了。

我建議接受這個答案來保留這個問題，因為將來有人可能會得到幫助，這是加載 JS 文件可能出現問題的幾個原因之一。

如果有足夠多的人投票關閉，我將刪除所有內容！