Pao*_*cca 9 javascript mime content-type node.js express
我正在尝试通过 Express 构建一个简单的单页应用程序。
一切正常，直到我开始创建类，然后浏览器抛出以下错误：
无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“text/html”进行响应。根据 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"))
索引.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后缀。
| 归档时间： |
|
| 查看次数： |
25821 次 |
| 最近记录： |