节点服务器:由于不允许的MIME类型("text/html")，加载模块被阻止 [英] Node server: Loading module was blocked because of a disallowed MIME type (“text/html”)
问题描述
当我尝试使用非常简单的应用程序运行本地节点服务器时，出现以下错误消息.
I get the following error message when I try to run a local node server with a very simple application (see coding below).
从" http://localhost:8080/importing.js "加载模块由于不允许的MIME类型("text/html")而被阻止.
Loading module from "http://localhost:8080/importing.js" was blocked because of a disallowed MIME type ("text/html").
我是Node和ES6模块的新手，所以我不太了解问题的详细信息.根据此 URL 模仿型'应用程序/javascript'必须明确提供给模块.但是，如何在下面的示例中实现这一目标?
I am new to node and ES6 Modules so I dont really understand the details of the problem. According to this URL the mime-type 'application/javascript' has to be served explicitly for modules. But how do I achieve this in my example below?
index.html
<!DOCTYPE html>
<html>
<head>
<script src="./importing.js" type="module"></script>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
server.js
var http = require('http');
var fs = require('fs');
const PORT=8080;
fs.readFile('./index.html', function (err, html) {
if (err) throw err;
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(PORT);
});
importing.js
import {a} from './exporting.js';
console.log(a);
exporting.js
export const a = 'Constant a';
我使用CMD启动服务器
I start the server in CMD with
node server.js
推荐答案
从本质上讲，您有一个服务器，可以为任何给定请求提供index.html文件的内容-无论该请求看起来是什么样.因此，浏览器会接收HTML并开始对其进行解释，并向您的script标记的src发出另一个请求，并且由于服务器仅提供您的index.html文件，因此浏览器在需要javascript时第二次接收到您的HTML文件
Essentially you have a server that for any given request, serves the content of your index.html file - regardless of what that request might look like. A browser therefore receives the HTML and begins to interpret it making another request for the src of your script tag and since the server only serves your index.html file, the browser receives your HTML file a second time when it expected javascript.
通常，您首先要创建一个服务器，然后根据请求作为输入来构造响应.一个如何按预期方式提供静态文件的原始示例如下所示:
Typically you'd create a server first then construct responses based on the request as input. A primitive example of serving your static files how you intended might look like the following:
const http = require('http')
const fs = require('fs')
const PORT = 8080
http
.createServer((request, response) => {
fs.readFile(`.${request.url}`, (err, data) => {
if (err) {
response.writeHeader(404, {
'Content-Type': 'text/plain'
})
response.write('404 Not Found')
response.end()
return
}
if (request.url.endsWith('.html')) {
response.writeHeader(200, {
'Content-Type': 'text/html'
})
}
if (request.url.endsWith('.js')) {
response.writeHeader(200, {
'Content-Type': 'application/javascript'
})
}
response.write(data)
response.end()
})
})
.listen(PORT)
请注意，此示例过于信任客户端，您通常希望以某种方式清除请求.我一直使用香草javascript，但是一旦您对它的工作方式感到满意，就值得查看 Express ，因为它可以简化路由/哑剧样板等.
Do note that this example is too trusting of the client and you would normally want to sanitise the request in some way. I kept to vanilla javascript but once you're comfortable with how it works, it's worth checking out Express as it will simplify the routing / mime-type boilerplate etc.
这篇关于节点服务器:由于不允许的MIME类型("text/html")，加载模块被阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
