当我通过 Node 服务器提供我的 HTML 时，为什么我的页面 Javascript 不起作用？答案

【问题标题】：Why is my page Javascript not working when I serve my HTML through a Node server?当我通过 Node 服务器提供我的 HTML 时，为什么我的页面 Javascript 不起作用？
【发布时间】：2016-04-16 23:37:07
【问题描述】：

当我通过节点服务器启动 HTML 页面时（即，在浏览器中导航到 localhost:3000），控制台上没有任何内容，正如我所期望的那样，基于页面 Javascript 文件（见下文）。但是，当我直接从文件夹中打开 HTML 文件时，“Hi”会按预期打印到控制台。

这是节点服务器 Javascript：

var http = require('http');
var fs = require('fs');

fs.readFile('./index.html', function(err, html) {
    if (err) {
        throw err;
    }
    http.createServer(function (request, response) {
         response.statusCode = 200;
         response.setHeader('Content-Type', 'text/html');
         response.write(html);
         response.end();
    }).listen(3000);
    console.log('Server is running!!');
})

这是页面 HTML：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript" src="jquery-1.12.1.js"></script>
        <script type="text/javascript" src="page.js"></script>
    </body>
</html>

这里是页面 Javascript：

$(document).ready(function() {
    console.log("Hi")
});

【问题讨论】：

page.js 是如何加载的？检查浏览器的网络选项卡。它可能没有被加载。您没有针对静态资产或专门针对 page.js 的路由，对吧？
网络选项卡 (Firefox) 说它正在以 200 状态加载。不确定“静态资产路由”是什么意思，但 page.js 是通过
我建议删除 page.js 并从 CDN 加载 jquery，以便您可以验证它是否正确加载。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
@SuperCodeBrah 在您上面的服务器中，它无法为 page.js 提供服务。也许它返回 200 但现在看看 page.js 的实际响应是什么——它将是 index.html 的内容。
要解决这个问题，请参阅stackoverflow.com/questions/11756459/… 了解如何使用节点 http 模块并进行路由。或者尝试 KoaJS 或 Express 或其他具有路由或路由方式的解决方案之一。但是您可以使用本回复中前面链接的 vanilla http 来做到这一点。

标签： javascript jquery html server

【解决方案1】：

您需要通过服务器中请求的 URL 进行分支。现在，当您的浏览器加载页面时，它会获取 index.html 的内容。但是，当它请求 page.js 时，它会获取 index.html 的内容，而不是 page.js 的内容。关于如何进行路由，这意味着查看请求的内容和请求的响应，请参阅Routing http requests through Node.js。

您可以使用 vanilla HTTP 模块并这样做，或者您可以引入像 KoaJS 或 Express 这样的框架，它们具有用于路由和其他事情的助手。哪个合适取决于您的需求（对于纯粹的学习，香草很棒）。

【讨论】：