为什么从nodejs服务器提供时，HTML页面中的JS文件不起作用

我是一个业余爱好者，只学习了大约三个星期的Web开发。作为一个简单的项目，我创建了一个定时器网站。我的定时器网站中有两个JavaScript文件。一个是script.js文件，其中包含将时间输入计时器和停止计时器的代码，另一个是Web Worker文件（worker.js），它只具有递减和返回输入的计时器时间的功能。多亏了这个Web Worker，计时器也可以在后台工作。当我在我的实时服务器上测试时，所有这些都是完美的。
但是现在我想在线部署我的网站，web worker在Node js中不起作用。我想我可以在index.html中引用script.js和worker.js，并通过服务器显示html，然后完成。但是当script.js工作时，worker是未定义的，并给出错误。
我对服务器和Web Worker之间的关系感到困惑。我需要在Node.js中单独定义worker吗？
我是否应该让script.js将从用户那里获得的时间发送给服务器，服务器将其发送给worker，worker减少时间并将其发送回服务器，服务器将减少的时间传递给script.js以显示在屏幕上？我不确定
如果你能解释一下，我会很感激的。
server.js代码：

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

app.set('view engine', 'ejs')
app.use(express.static(path.join(__dirname, "public")));

app.get('/', (req, res) => {
  res.render("index")
})

app.listen(3000);

public目录是包含script.js和worker.js的目录。会不会有什么问题？

首先，检查浏览器中的控制台，看看它告诉你什么是请求的URL，哪些是不工作的（通常是404错误）。
这类问题通常归结为调整三个不同的东西：
1.如何确切地指定HTML页面中的资源链接。
1.如何从express服务器（通常使用express.static()）提供文件。
1.您在服务器上找到的目标文件的位置与express.static()代码行所指向的位置相关。
这三个方面都必须兼容。
上面的第1项决定了浏览器将从服务器请求哪个URL。
上面的第2项决定了服务器将如何准确地匹配传入的请求，以及它将在服务器文件系统中的何处查找匹配的文件名。
上面的第3项确定目标文件是否位于服务器文件系统中的正确位置，以便服务器根据传入的URL找到所需的目标文件。
假设你的HTML文件中有这样的内容：

<script src="worker.js"></script>

首先，这个文件名在路径上没有前导/。因此，这意味着浏览器将采用包含网页的路径，并将其与此文件名组合在一起，并使其成为完全限定的路径。请记住，浏览器总是要求完整的路径，所以如果您没有在HTML文件中指定顶级路径，浏览器将使其成为一个。使用上面的<script>标记，如果网页URL本身是这样的：

http://someserver.com/somepath/index.html

然后，浏览器会请求http://someserver.com/somepath/webworker.js，一旦进入Express，它将是/somepath/webworker.js。所以，你必须确保你在Express中的路线设置与之匹配。
另一方面，如果你用一个前导/来指定它：

<script src="/worker.js"></script>

然后，服务器会发出一个独立于包含HTML页面的路径的URL请求，并会向您的服务器请求：

http://someserver.com/script.js

这通常是更简单的模型（总是在HTML页面中的资源URL上包含一个前导/）。
一旦进入Express，它将是/script.js。我们假设这就是这里发生的事情。然后你有这行Express代码：

app.use(express.static(path.join(__dirname, "public")));

因此，为了服务于您的/script.js请求，script.js文件需要直接位于指向path.join(__dirname, "public")的目录中。它可能看起来像/projectRoot/public/script.js。
这里有几个例子，都将工作。我将展示这三件作品。页面中的第一个链接，然后是express.static()代码行，然后是实际文件在服务器上的位置。为了清楚起见，我在这里使用/projectRoot作为项目的顶层目录，但是如果您愿意，您当然可以像path.join(__dirname, "public")那样动态地构建它。

公共文件夹根目录下的目标文件

<script src="/worker.js"></script>
app.use(express.static("/projectRoot/public"));
/projectRoot/public/script.js

公共文件夹子目录下的目标文件

<script src="/js/worker.js"></script>
app.use(express.static("/projectRoot/public"));
/projectRoot/public/js/script.js

只提供公用文件夹子目录的文件，源上没有路径

<script src="/worker.js"></script>
app.use(express.static("/projectRoot/public/js"));
/projectRoot/public/js/script.js

只能从公共文件夹的子目录提供文件，路径在源目录上

<script src="/js/worker.js"></script>
app.use("/js", express.static("/projectRoot/public/js"));
/projectRoot/public/js/script.js

为什么从nodejs服务器提供时，HTML页面中的JS文件不起作用

1条答案

相关问题

热门标签

最新问答