无法使用 Node.js 服务器加载本地资源答案

【问题标题】：Can't load local resources with Node.js server无法使用 Node.js 服务器加载本地资源
【发布时间】：2019-12-29 11:21:59
【问题描述】：

我正在开发一个在请求后加载 HTML 页面的简单服务器。

代码工作正常，但我无法将本地资源“连接”到我的 HTML 页面（CSS 和 Javascript 文件），我收到标题中提到的错误。

这是我的 Node.js 服务器：

var server = http.createServer(function(request, response){
var path = url.parse(request.url).pathname;
console.log("Print path:"+ path);

switch(path){
    case '/':
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write('hello world');
        response.end();
        break;
    case '/index.html':
        console.log("print full address:"+__dirname + path);
        fs.readFile(__dirname + path, function(error, data){
            if (error){
                response.writeHead(404);
                response.write("opps this doesn't exist - 404");
                response.end();
            }
            else{
                response.writeHead(200, {"Content-Type": "text/html"});
                response.write(data, "utf8");
                response.end();
            }
        });
        break;
    default:
        response.writeHead(404);
        response.write("opps this doesn't exist - 404");
        response.end();
        break;
}
});

server.listen(5000);

index.html 文件已加载，但我无法访问我的 HTML 文件中的所有本地脚本和样式表。

这是我的 HTML（短版，只是脚本和样式表部分）：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>A Pen by  Mattia Surricchio</title>
    <link rel='stylesheet' href='02cbe09766a509e291eb2a444.css'>
    <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src='02cbe09766a509e291eb2a444.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/tone/13.8.9/Tone.min.js'></script>
    <script  src="script.js"></script>

</body>

所有文件都在我的node.js文件的同一个文件夹中，所以服务器、HTML、CSS和Javascript文件都在同一个文件夹中。

我正在浏览器中使用http://localhost:5000/index.html 访问服务器。

我用console.log() 检查了路径，它们看起来是正确的（HTML 加载正确，问题是页面内的 CSS 和 Javascript 文件）。

可能是什么问题？

PS：如果我自己加载index.html 页面（只需用浏览器打开它），所有文件都会加载并正确显示。

编辑： 我部分解决了转移到express.js 的问题，这是我的新服务器（我遵循这个答案：nodejs/express include local js file）：

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var  path = require('path');
var express = require('express');


app.use(express.static(path.join(__dirname, 'Pad')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

我的目录结构如下：

root/
  app.js //this is my node.js server
  node-modules
  package.json
  Pad/
      index.html
      script.js
      style.css

通过这个解决方案，我能够加载 HTML 文件，包括链接在 HTML 文件中的 script.js 文件和 style.css。

但是，我也在使用本地模块（在这种特殊情况下，我使用的是 Tone.js 和 Tonal.js），这些模块是在文件夹 node-modules 中使用 npm 安装的。

我如何访问这些资源？我收到了error 404。

我必须将这些资源移到我的Pad 文件夹中吗？

【问题讨论】：

这对于 express.js 来说超级简单。
@CloudBranch 我解决了迁移到 express.js 的问题。但是现在我无法访问节点模块，我该如何解决这个问题？

标签： javascript html node.js server

【解决方案1】：

您需要为您的 CSS 文件定义一个路由，就像为 index.html 执行此操作一样

case '/style.css':
    res.writeHead(200, {'Content-Type': 'text/css'});
    res.write(fs.readFileSync(__dirname + path, 'utf8'));
    res.end();
    break;

【讨论】：

我该怎么做？我只是将这种情况添加到我的开关中，然后它会加载我的 HTML 中包含的所有 CSS？
@MattiaSurricchio 是的。在现实生活中的应用程序中，尽管您会使用静态服务器模块或配置单独的静态服务器，例如 Apache、Nginx 或 IIS（甚至是 AWS S3、Akamai、Coulflare 或 Google Cloud CDN 等）
所以基本上我应该转移到 express.js 并设置一个包含我所有资源的静态文件夹？ Css，Javascript ecc ...我很好奇这种方式是否可行。我将使用 express 实现解决方案，然后我将回答我自己的问题
无论如何，我尝试添加另一个大小写开关，但它不起作用。我认为每个开关都是由浏览器中编写的url触发的。如果我写 .../index.html 它不会加载 css，因为它没有被询问并且它不会触发开关，对吗？

【解决方案2】：

您需要像一开始调用 html 文件一样单独调用这些文件。首先为要解析的文件创建直接 url 列表，然后分别对它们发出 get 请求。

【讨论】：