Узловой сервер: загрузка модуля была заблокирована из-за запрещенного типа MIME («text / html») - PullRequest
Новая
       67

Узловой сервер: загрузка модуля была заблокирована из-за запрещенного типа MIME («text / html»)

1 голос
/ 25 сентября 2019

Я получаю следующее сообщение об ошибке при попытке запустить сервер локального узла с очень простым приложением (см. Кодирование ниже).

Загрузка модуля из «http://localhost:8080/importing.js” заблокированаиз-за недопустимого типа MIME («text / html»).

Я новичок в узлах и модулях 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

1 Ответ

0 голосов
/ 25 сентября 2019

По сути, у вас есть сервер, который для любого данного запроса обслуживает содержимое вашего 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-типа и т. Д.

...