时间戳

首页 > 解决方案 > 加载模块脚本失败：需要一个 JavaScript 模块脚本

javascript - 加载模块脚本失败：需要一个 JavaScript 模块脚本

问题描述

控制台写道“加载模块脚本失败：需要一个 JavaScript 模块脚本，但服务器以“”的 MIME 类型响应。对每个 HTML 规范的模块脚本强制执行严格的 MIME 类型检查”。我很确定我做的一切都是正确的，服务器在回答请求时将标题设置为“text/javascript”。我明确 console.log 我在 writeHeader 中指定的内容，并且有“text/javascript”，但浏览器出于某种原因显示空字符串“”。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./StylesCSS/main-style.css">
    </head>
    <body>
        DOC
        <script type="module" src="./JScripts/init.js"></script>
    </body>
</html>

服务器：

const fs = require("fs");
const http = require("http");
let { _mainMap } = require("./addresses");

const server = http.createServer((req, res) => {
    console.log(req.url);
    let _currentReq;
    if (_currentReq = _mainMap.get(req.url))
    {
        console.log(_currentReq[1]);
        res.writeHeader(200, "Content-Type", _currentReq[1]);
        fs.readFile(_currentReq[0], (err, data) => {
            if (err) console.log("READ_FILE::ERROR");
            res.write(data);
            res.end();
        });
    } else 
    {
        res.writeHeader(404, "Content-Type", "text/html");
        fs.readFile(__dirname + "/../404.html", (err, data) => {
            if (err) console.log("READ_FILE::ERROR");
            res.write(data);
            res.end();
        });
    }
});

server.listen(8080, () => {
    console.log("LISTENING_TO_PORT_8080");
});

//-----------------------------ANOTHER-MODULE----------------------------------------------

let _dir = __dirname;
let _mainMap = new Map();

module.exports = {
    _mainMap: _mainMap
};

//easy to init arr
let _hashArr = [
    ["/", _dir + "/../main.html", "text/html"],
    ["/JScripts/init.js", _dir + "/../JScripts/init.js", "text/javascript"],
    ["/StylesCSS/main-style.css", _dir + "/../StylesCSS/main-style.css", "text/css"]
];

//copy values from _hashArr to _mainMap
for (let i = 0; i < _hashArr.length; i++)
{
    _mainMap.set(_hashArr[i][0], [_hashArr[i][1], _hashArr[i][2]]);
}

init.js 文件本身是空白的

标签： javascriptnode.jsmodulemime

解决方案

推荐阅读