浏览器接受“经典"js脚本标签，但不包含ES6模块-带有节点http服务器的MIME错误 [英] Browser accepts "classic" js script-tag, but not ES6 modules — MIME error w/ Node http server
问题描述
我想使用ES6模块，因此我决定将Node用作简单的Web服务器，以避免在本地进行操作时第一次遇到的所有CORS相关错误.现在，我在浏览器中收到了与MIME类型相关的错误，我不太了解.
I want to play with ES6 modules, so I decided on using Node as a simple web server to avoid all CORS related errors I first encountered when doing it locally. Now I get MIME type related errors in the browser which I can't quite grasp.
这是我的 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 文件，该文件包含以下代码:
If I try to access my index.html file in the browser, which contains the following code:
<!DOCTYPE html>
<html>
<body>
<!-- Works -->
<script src="index.js"></script>
<!-- Doesn't work -->
<script src="module.js" type="module"></script>
</body>
</html>
我收到以下错误:
无法加载模块脚本:服务器回应为非JavaScript MIME类型的文本/html".
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".
type ="text/javascript" 属性对模块标签也无效.我了解到，默认情况下所有ES6模块都是延迟的"，这意味着它们不会在HTML完全解析之前执行.我猜这是问题所在，但我不知道如何相应地修改 server.js 文件以解决该问题.非常感谢您的帮助！如果不是太不切实际，我宁愿不要引入任何NPM软件包.
The type="text/javascript" attribute has no effect on the module tag either. I have read that all ES6 modules are "deferred" by default, meaning that they don't execute before the HTML is fully parsed. I guess this is the problem, but I don't know how to modify my server.js file accordingly to fix it. Help is greatly appreciated! If not too unpractical, I would prefer not to pull in any NPM packages.
我以为，因为我访问了 http://localhost:8080/index.html ，所以发送带有 text类型的标头是正确的/html .但是，如果我 console.log(url.parse(req.url，true)); ，我现在看到延迟的脚本标记会触发 createServer 回调.记录的对象明确显示它是JS模块的文件名.
I thought that since I accessed http://localhost:8080/index.html That it was correct to send a header with type text/html. But if I console.log(url.parse(req.url, true)); I now see that deferred script tags trigger the createServer callback. The object logged explicitly shows it's the filename of the JS module.
修复错误的标头后，我将返回一个可行的示例.
I'll come back with a working example once I've fixed the faulty header.
解决方案:我引入了两个附加模块；路径和 mime .我在 url.parse()返回的路径的扩展名上使用了 mime.getType().
SOLUTION: I pulled in two additional modules; path and mime. I used mime.getType() on the extension of the path returned by 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);
推荐答案
res.writeHead(200, {'Content-Type': 'text/html'});
这表明每个文件都带有 text/html 模仿类型.
This would suggest that every file is served with a text/html mimetype.
这篇关于浏览器接受“经典"js脚本标签，但不包含ES6模块-带有节点http服务器的MIME错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
