【BUG】vite build、Flask运行后报错Failed to load module script. Strict MIME type checking is enforced

解决方案来源于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的其他配置项如官网所示。点击这里查看官网的更多配置项。