Question

我正在开发一个简单的服务器，可以在请求后加载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），这些模块是通过npm安装在文件夹{{1}中的}。

我如何访问这些资源？我得到node-modules。

我是否必须将这些资源移到error 404文件夹中？

Answer 1

您需要为index.html的CSS文件定义路由。

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

Answer 2

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

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

2 个答案: