导入CKEditor JS模块遇MIME类型错误，如何修改？能否用htaccess？

尝试导入路径为/assets/js/@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter的JS模块时，出现以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

可以通过.htaccess文件为目标目录配置正确的MIME类型来解决这个问题，具体方案如下：

相关代码示例 #

前端模块导入代码 #

<script type="module">
    import SimpleUploadAdapter from '/assets/js/@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ SimpleUploadAdapter],
            toolbar: [],
            simpleUpload: {
                // 图片上传目标URL
                uploadUrl: 'http://example.com',

                // 启用XMLHttpRequest的withCredentials属性
                withCredentials: true,

                // 上传请求附带的请求头
                headers: {
                    'X-CSRF-TOKEN': 'CSRF-Token',
                    Authorization: 'Bearer <JSON Web Token>'
                }
            }
        } )
        .then( )
        .catch( );
</script>

PHP MIME类型检测代码 #

<?php echo mime_content_type($_SERVER['DOCUMENT_ROOT'] . '/assets/js/@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js') ?>

检测结果为text/x-c++，这是mime_content_type函数对文件的误识别，不代表文件本身的类型问题。

.htaccess解决方案 #

在网站根目录的.htaccess文件中添加以下规则，为JS文件指定正确的MIME类型：

# 为所有JS文件设置正确的MIME类型
AddType application/javascript .js

# 或者仅针对CKEditor所在目录设置
<Directory "/assets/js/@ckeditor">
    AddType application/javascript .js
</Directory>

补充说明 #

• 服务器返回text/html的常见原因：要么是请求的JS文件路径不存在，服务器返回了404页面（MIME为text/html）；要么是服务器未正确配置JS文件的MIME类型。
• 优先检查文件路径是否正确：确保/assets/js/@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js文件确实存在，且路径大小写与服务器一致（部分服务器区分大小写）。
• 如果使用<Directory>规则，需要确保服务器允许.htaccess覆盖目录配置（即AllowOverride设置为FileInfo或All）。

内容的提问来源于stack exchange，提问作者Sentim