我在以下目录中有一个 ejs 文件:
./admin/admin.ejs
我在以下目录中有普通的旧 JS 文件:
./public/client.js
以及以下目录中的 Express 应用程序:
./app.js
使用以下代码渲染 ejs 文件:
const express = require("express");
const { Server } = require("socket.io");
const { sessionMiddleware, wrap } = require("./server/sessionStore");
const { createServer } = require("node:http");
const { join } = require("node:path");
const app = express();
const server = createServer(app);
const db = require("./databases/dbChooser");
const config = require("./server/config");
const { banCheckMiddleware } = require("./server/middleware");
const io = new Server(server, config.cors);
const WorkerPool = require("./server/workerPool");
const workers = new WorkerPool(1, "./drawingWorker");
app.use(sessionMiddleware);
app.use(banCheckMiddleware);
app.set("view engine", "ejs");
app.set("views", join(__dirname, "./admin"));
app.get("/", (req, res) => {
if (!req.session.initialized) {
req.session.initialized = true;
req.session.visitCount = 1;
} else {
req.session.visitCount = (req.session.visitCount || 0) + 1;
}
res.sendFile(join(__dirname, "./public/index.html"));
});
app.use(express.static("public"));
app.use(express.static("admin"));
ejs 渲染良好,一切都在表面上运行,但是当我尝试在 EJS 文件中使用 client.js 脚本时,出现以下错误:
Refused to execute script from 'http://127.0.0.1:3000/public/client.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
我的快速解决方法是在管理目录中创建一个单独的 js 文件,然后将客户端 js 代码复制并粘贴到其中,并且工作正常,没有错误。我也尝试这样做:
<script type = "text/javascript" src="../public/client.js"></script>
但这不起作用。管理目录中的 JS 和 CSS 文件工作正常,但是当我尝试从不同的目录引用另一个文件时,它就会生气。
请参阅以下示例,它们可以帮助您阐明express.static中间件的工作原理,以及相关参考资料。
以下两条语句本质上将使两个单独的文件夹可以从同一请求 URL 访问。
app.use(express.static('admin'));
app.use(express.static('public'));
示例:
假设站点下有以下文件夹和文件。
<site directory>
public
code1.js
admin
code2.js
现在,让我们假设来源为 http://localhost:3000
如果是这样,则来自浏览器的以下两个直接请求是有效的。这两个请求都将在浏览器中显示相应文件的源代码。
在此基础上,让我们看看从文件引用它时是否相同。
让我们假设以下站点,index.html 位于公共文件夹中。其内容如下所示。
<site directory>
public
index.html
code1.js
admin
code2.js
index.html
<!DOCTYPE html>
<head>
Reference to JS
</head>
<body></body>
<script src="./code1.js"></script>
<script src="./code2.js"></script>
如果是这样,请求URL http://localhost/index.html 将成功加载同一个文件-index.html,然后分别执行code1.js 和code2.js 中的代码。这意味着其中的两个引用是有效的,并注意 code2.js 来自另一个文件夹 admin。
注:
请注意,一旦 EJS 文件呈现,它就变成了普通的 html 文件,其中引用的 JavaScript 源文件将被执行 就像在普通的 html 文件中一样。这就是我没有将 EJS 文件带入上面的讨论和示例的原因。