浏览器接受“经典” js脚本标签，但不接受ES6模块—带有节点http服务器的MIME错误

Question

我想使用ES6模块，因此我决定将Node用作简单的Web服务器，以避免在本地进行操作时遇到的所有CORS相关错误。 现在，我在浏览器中得到了与MIME类型相关的错误，但我不太了解。

这是我的server.js文件：

const http = require('http'),
      url  = require('url'),
      fs   = require('fs');

http.createServer((req, res) => {

  const q = url.parse(req.url, true),
        filename = "." + q.pathname;

  fs.readFile(filename, (err, data) => {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });

}).listen(8080);

如果尝试在浏览器中访问index.html文件，该文件包含以下代码：

<!DOCTYPE html>
<html>
<body> 

  <!-- Works -->
  <script src="index.js"></script>

  <!-- Doesn't work -->
  <script src="module.js" type="module"></script>

</body>
</html>

我收到以下错误：

无法加载模块脚本：服务器以非JavaScript MIME类型“ text / html”响应。

type="text/javascript"属性对模块标签也无效。 我了解到，默认情况下所有ES6模块都是“延迟的”，这意味着它们在HTML完全解析之前不会执行。 我猜这是问题所在，但是我不知道如何相应地修改server.js文件来修复它。 非常感谢您的帮助！ 如果不是太不实际，我宁愿不要引入任何NPM软件包。

编辑：我以为，因为我访问了http://localhost:8080/index.html发送text/html的标头是正确的。 但是如果我console.log(url.parse(req.url, true)); 现在，我看到延迟的脚本标记触发了createServer回调。 记录的对象明确显示它是JS模块的文件名。

修复错误的标头后，我将返回一个工作示例。

解决方案：我引入了两个附加模块； 路径和哑剧 。 我在mime.getType()返回的路径的扩展名上使用了url.parse() 。

const http = require('http'),
      url  = require('url'),
      fs   = require('fs'),
      mime = require('mime'),
      path = require('path');

http.createServer((req, res) => {

  const q = url.parse(req.url, true),
        filename = "." + q.pathname;

  fs.readFile(filename, (err, data) => {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': mime.getType(path.extname(filename))});
    res.write(data);
    return res.end();
  });

}).listen(8080);

Answer 1

res.writeHead(200, {'Content-Type': 'text/html'});

这表明每个文件都带有text/html mimetype。

Answer 2

当浏览器请求您的模块时，您将发回Content-Type: text/html标头- 根据HTML规范 ，此无效：

如果满足以下任一条件，则抛出“ NetworkError” DOMException：

• 响应的类型为“ error ”
• 响应的状态不是正常状态
• 从响应的标头列表中提取MIME类型的结果不是JavaScript MIME类型

据我所知，“经典”脚本没有此限制。

为了解决此问题，您需要使用适当的MIME类型（例如text/javascript从服务器发送回JavaScript模块：

res.writeHead(200, {'Content-Type': 'text/javascript'});

我建议您使用Express之类的东西，而不是直接与http模块一起使用- 您可以直接使用很多此功能 ，并且我相信它将为您设置标题。