解决方案来源于Stack Overflow。 翻译来源于javascript - Python Flask - 错误 : “Failed to load module script. Strict MIME type checking is enforced”. 适用于生产环境,不适用于本地服务器。
我搬运了Stack Overflow的问题和翻译, 并写明针对vite的解决办法。
文章目录
- Stack Overflow
- 问题
- 最佳答案
- 针对Vite的解决办法
Stack Overflow
问题
我有这个html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
rel="stylesheet"
href="../../../static/css/style.css"
type="text/css" />
<link
rel="stylesheet"
href="../../../static/css/user_header.css"
type="text/css" />
<!--suppress HtmlUnknownTarget -->
<link rel="shortcut icon" href="/favicon.png">
<script type="module" src="../../../static/js/node_connect.js" ></script> <-- Error
<script src="../../../static/lib/jquery.min.js"></script>
<script src="../../../static/lib/selfserve.js"></script>
</head>
有问题的是 node_connect.js
文件。在本地启动Flask web工具(Python 3.7.2),打开页面时控制台报如下错误:
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain".
Strict MIME type checking is enforced for module scripts per HTML spec.
检查标题:
Content-Type: text/plain; charset=utf-8
然而,在生产中(当通过 Gunicorn 开始时)它给出了:
Content-Type: application/javascript; charset=utf-8
我猜网络服务器(Apache)在生产案例中为它们提供服务,但另一件事是在测试这个网络工具的其他页面时,它们都可以正常工作并加载javascript 文件正确(即使它们的内容类型是文本/纯文本)。然而不同的是,我注意到,在类型中。
这适用于我的情况:
<script src="../../static/js/translator/library/materialize.js"></script>
或这个:
<script type="application/javascript" src="../../static/js/translator/library/materialize.js"></script>
当然,我为有问题的 javascript
尝试了这个。文件并收到以下错误(这意味着它现在已加载):
Uncaught SyntaxError: Cannot use import statement outside a module
据我研究,这基本上意味着我需要将类型设置为 module
(但是这会使浏览器拒绝 .js 文件)。
谁能帮我解决这个问题?
最佳答案
问题是由 flask
如何猜测每个静态文件的内容类型引起的。
做那个 flask 进口mimetypes并调用mimetype, encoding = mimetypes.guess_type(download_name)
该模块从多个来源创建已知 mime 类型的数据库,并使用它返回 mime 类型。
Linux和MacOS下mimetypes.py
看里面的文件:
knownfiles = [
"/etc/mime.types",
"/etc/httpd/mime.types", # Mac OS X
"/etc/httpd/conf/mime.types", # Apache
"/etc/apache/mime.types", # Apache 1
"/etc/apache2/mime.types", # Apache 2
"/usr/local/etc/httpd/conf/mime.types",
"/usr/local/lib/netscape/mime.types",
"/usr/local/etc/httpd/conf/mime.types", # Apache 1.2
"/usr/local/etc/mime.types", # Apache 1.3
]
但在 Windows 下,它会在注册表中查找:
with _winreg.OpenKey(_winreg.HKEY_CLASSES_ROOT, '') as hkcr:
for subkeyname in enum_types(hkcr):
try:
with _winreg.OpenKey(hkcr, subkeyname) as subkey:
# Only check file extensions
if not subkeyname.startswith("."):
continue
# raises OSError if no 'Content Type' value
mimetype, datatype = _winreg.QueryValueEx(
subkey, 'Content Type')
if datatype != _winreg.REG_SZ:
continue
self.add_type(mimetype, subkeyname, strict)
所以要解决 flask 认为.js文件实际上是text/plain
的问题只需打开 regedit
并将此注册表项调整为 application/javascript
。
针对Vite的解决办法
找到注册表值,双击Content Type
改成application/javascript
,然后重启电脑。
如果还没有解决,请看你的后缀是否是单纯的.js
,如果是.1242342.js
,必须改成纯.js
后缀才能生效。
为了彻底根治修改文件的弊病,我们可以把vite
的配置文件改一下,利用自定义打包选项rollupOptions
,修改输出的js文件名称。
参考:Vite2 如何设置打包后文件名
vite.config.js的其他配置项如官网所示。点击这里查看官网的更多配置项。