Express error: Strict MIME type checking is enforced for module scripts per HTML spec

Question

我正在尝试通过 express 构建一个简单的单页应用程序。

一切正常，直到我开始创建 classes，然后浏览器抛出以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

我希望 express.static() 能让它消失，但事实并非如此。我对 JS、Node 等还不是很熟练，所以我为这里的任何愚蠢之处道歉。

目前我的代码非常简单：

文件架构：

-server.js
-[frontend]
+-[static]
++-index.html
++-[js]
+++-index.js
+++-[views]
++++-AbstractView.js
++++-Home.js
-[node_modules]
-package.json

server.js

const express = require('express');
const path = require('path');

const App = express()

App.use('/static', express.static(path.resolve(__dirname, 'frontend', 'static')))
App.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, "frontend", "index.html"))
})
App.listen(3000, () => console.log("server running on port 3000"))

index.js:

import Home from "./views/Home"

const navigateTo = url => {
    history.pushState(null, null, url)
    router()
}

const router = async() => {
    const routes = [{
                path: '/',
                view: new Home()
            },
            // {
            //     path: '/projects',
            //     view: () => console.log('projects')
            // },
            // {
            //     path: '/about',
            //     view: () => console.log('about')
            // },
            // {
            //     path: '/studies',
            //     view: () => console.log('studies')
            // },
        ]
        // test routes for matches
    const potentialMatches = routes.map(route => {
        return {
            route: route,
            isMatch: location.pathname === route.path
        }
    })

    /**
     * NEED TO SET 404 PAGE!
     */
    let match = potentialMatches.find(potentialMatch => potentialMatch.isMatch)
    if (!match) {
        match = {
            route: routes[0],
            isMatch: true
        }
    }

    const view = new match.route.view()
    const content = document.querySelector("#app")
    content.innerHTML = await view.getHtml()
    console.log(content);
}

window.addEventListener("popstate", router);

document.addEventListener("DOMContentLoaded", () => {
    document.body.addEventListener("click", e => {
        if (e.target.matches("[data-link")) {
            e.preventDefault()
            navigateTo(e.target.href)
        }
    })
    router()
})

主页class（扩展和抽象视图通用class）：

import AbstractView from "./AbstractView";

export default class Home extends AbstractView {
    constructor() {
        super()
        this.setTitle("Home")
    }
    setTitle(title) {
        document.title = title
    }

    async getHtml() {
        return `<h1>Home</h1>`;
    }
}

泛型class:

export default class AbstractView {
    constructor() {

    }
    setTitle(title) {
        document.title = title
    }

    async getHtml() {
        return "";
    }
}

当然，index.html 文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Paolo Iocca</title>
</head>

<body>
    <div class="menu" id="menu">
        <span class="menu__line"></span>
        <span class="menu__line"></span>
        <span class="menu__line"></span>
    </div>
    <aside class="aside">
        <nav class="nav">
            <ul class="nav__list">
                <li class="nav__list__item">
                    <a href="/" class="nav__list__item__link" data-link>home </a>
                </li>
                <li class="nav__list__item">
                    <a href="/projects" class="nav__list__item__link" data-link>projects</a
            >
          </li>
          <li class="nav__list__item">
            <a href="/about" class="nav__list__item__link" data-link>about </a>
                </li>
                <li class="nav__list__item">
                    <a href="/studies" class="nav__list__item__link" data-link>studies
            </a>
                </li>
            </ul>
        </nav>
    </aside>
    <div id="app"></div>
    <script type="module" src="/static/js/index.js"></script>
</body>

</html>

希望你能帮我解决这个问题。非常感谢。

_____更新

这是 package.json 文件，以防万一：

{
    "dependencies": {
        "express": "^4.17.1"
    },
    "name": "boilerplate-server",
    "version": "1.0.0",
    "main": "server.js",
    "devDependencies": {
        "nodemon": "^2.0.14",
        "serve-static": "^1.14.1"
    },
    "scripts": {
        "dev": "nodemon server",
        "start": "node server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
}

Answer 1

声明

import Home from "./views/Home"

导致请求 GET /static/js/views/Home（没有 .js 后缀），static 中间件无法提供。但是现在下一个中间件接管并响应 index.html 文件（Content-Type: text/html）。这就是为什么您看到 200 OK 状态，但浏览器抱怨错误的内容类型。

有

express.static(path.resolve(__dirname, 'frontend', 'static'),
  {extensions: ["js"]});

您将指示 static 中间件静默添加 .js 后缀。

Express error: Strict MIME type checking is enforced for module scripts per HTML spec

Express error: Strict MIME type checking is enforced for module scripts per HTML spec

javascript

node.js

express

content-type

mime