Question

当我尝试使用非常简单的应用程序运行本地节点服务器时，出现以下错误消息。

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

我是Node和ES6模块的新手，所以我不太了解问题的详细信息。根据此URL，必须为模块显式提供mime类型的“ application / 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

Answer 1

从本质上来说，您有一个服务器，可以针对任何给定请求提供index.html文件的内容-无论该请求看起来如何。因此，浏览器会接收HTML并开始对其进行解释，并再次请求您的src标签的script，并且由于服务器仅提供您的index.html文件，因此浏览器会收到您的HTML文件第二次需要使用javascript。

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

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型样板等。

Answer 2

我知道您只是在导入命令，但是我会让您知道我的解决方案，看看您是否感兴趣。对我来说，此错误来自模块中的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;

我没有测试^，但这对我来说很有意义。我希望这可以帮到您，或者使您离得更近，从而解决了我的问题。

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

2 个答案: