节点服务器：由于不允许的 MIME 类型（“text/html”），加载模块被阻止答案

【问题标题】：Node server: Loading module was blocked because of a disallowed MIME type (“text/html”)节点服务器：由于不允许的 MIME 类型（“text/html”），加载模块被阻止
【发布时间】：2020-01-25 00:53:15
【问题描述】：

当我尝试使用非常简单的应用程序运行本地节点服务器时收到以下错误消息（请参阅下面的代码）。

由于不允许的 MIME 类型（“text/html”），从“http://localhost:8080/importing.js”加载模块被阻止。

我是节点和 ES6 模块的新手，所以我不太了解问题的细节。根据这个URL，必须为模块显式地提供 mime 类型的“应用程序/javascript”。但是我如何在下面的示例中实现这一点？

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 启动服务器

node server.js

【问题讨论】：

如果您的问题得到解决，请接受答案。这也会对其他人有所帮助。

标签： javascript node.js mime-types es6-modules

【解决方案1】：

我知道您只是在导入命令，但我会告诉您我的解决方案，看看您是否感兴趣。对我来说，这个错误来自模块中的 import 语句。我试图导入整个文件，包括它具有的所有功能和导入，同时基本上使用相同的服务器和 HTML。

我的importing.js：

import * as Spotify from "./spotify-web-api.js";

window.basicAlert = function basicAlert() {
    alert("this is a test to see if basicAlert runs properly");
}

console.log("Should print to console with no error on imports");

我不知道import * as 背后的逻辑，但它成功地导入了我的文件而没有引发 MIME 类型错误。至于window.basicAlert =，Javascript 显然不喜欢让任何导入它的文件访问它的函数或变量，除非它是手动附加到窗口的。你现在没有这个错误，但是文件导入成功后它会告诉你a 没有定义。虽然我已将它附加到 importing.js 中的函数中，但您需要将其放入 exporting.js 中，如下所示：

const a = 'Constant a';
windows.a = a;

我没有对此进行测试 ^ 但这对我来说很有意义。我希望这可以帮助你，或者更接近，因为它解决了我的问题。

【讨论】：

【解决方案2】：

基本上，您有一个服务器，可以针对任何给定请求提供您的 index.html 文件的内容 - 无论该请求可能是什么样子。因此，浏览器接收 HTML 并开始解释它对您的 script 标记的 src 发出另一个请求，并且由于服务器仅提供您的 index.html 文件，因此浏览器会在预期 javascript 时第二次接收您的 HTML 文件.

通常，您会先创建一个服务器，然后根据作为输入的请求构建响应。按照您的预期提供静态文件的原始示例可能如下所示：

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，因为它将简化路由/mime 类型样板等。

【讨论】：

我创建了一个快速服务器。但我无法使用此解决方案解决 MIME 错误。这是我的 [server.js][1]，这是我的 [api.js][2] [1]：github.com/tmtanzeel/social-coder/blob/master/server/server.js [2]：github.com/tmtanzeel/social-coder/blob/master/server/routes/…
我运行了 api 和 angular 构建，它似乎按预期工作。这听起来像是您的服务器/环境的问题，但没有足够的信息来重现该问题。无论如何，这最好用MCVE 作为单独的 SO 问题来解决。
好的，先生。我明白。但我已经问过stackoverflow.com/questions/58173204/… 和stackoverflow.com/questions/57978442/… 请帮帮我。
也请参阅stackoverflow.com/questions/58254370/…。谢谢