javascript - Express 错误:根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查
问题描述
我正在尝试通过 express 构建一个简单的单页应用程序。
一切正常,直到我开始创建类,然后浏览器抛出以下错误:
加载模块脚本失败:需要一个 JavaScript 模块脚本,但服务器以“text/html”的 MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
我希望这express.static()
会让这种情况消失,但事实并非如此。我对 JS、Node 和所有这些还不是很熟练,所以我为这里的任何愚蠢表示歉意。
我的代码目前非常简单:
文件架构:
-server.js
-[frontend]
+-[static]
++-index.html
++-[js]
+++-index.js
+++-[views]
++++-AbstractView.js
++++-Home.js
-[node_modules]
-package.json
服务器.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()
})
Home 类(扩展和 AbstractView 通用类):
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>`;
}
}
泛型类:
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": ""
}
解决方案
该声明
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
后缀。
推荐阅读
- react-native - 从 CI/CD gitlab 发布时如何使用访问令牌进行博览会
- python-3.x - 附加和更新字典创建克隆
- python - 如何从另一个脚本访问函数的特定变量?
- php - Laravel Voyager 图片上传失败并收到错误消息“Intervention\Image\Exception\NotSupportedException Reading Exif data is not supported”
- c++ - gRPC 客户端不返回证书
- powershell - 如何使用 Windows PowerShell / 批处理脚本设置禁止字不复制?
- kotlin - 如何使用 Kotlin mutliplatform 执行异步本机进程?
- arima - 如何从 ACF 和 PACF 中识别 ARIMA(p,d,q) 模型?
- azure - 具有或不具有可用性区域的 Azure 数据磁盘
- html - 导航栏一直隐藏我的正文内容