Question

编辑：我知道使用快递或其他更容易的东西，但这只是一个学习练习，很抱歉，如果这一切都非常复杂，哈哈！

编辑2：出现（在添加一些控制台日志以进行调试之后），似乎问题与浏览器向服务器发出一个请求（例如，对于style.css），它在完成第一个请求的响应之前发出另一个请求（例如，对于login-fail.js）。似乎来自浏览器的这些多个请求会导致某种问题，每个后续请求都会阻止先前的完成。哎呀，我需要帮助。

编辑3：经过一些调试后，似乎路径名变量在每次请求时都不会更改其值。由于某种原因，路径名的值在每个请求上都会持续存在，这会使每个请求的响应都相同 - 陌生人仍然是，uri的值会在每个请求中发生变化（而uri就是路径名的值......）仍然试图找出为什么这种奇怪的行为正在发生。

所以当服务器发出链接到特定.html文件的外部.js和.css文件的请求时，我一直遇到这个问题。答案总是不一致的。例如，有时代码将完美运行，有时css将加载而不是js，有时两者都有，有时两者都没有。我无法确定这是因为我的代码是同步的，还是出于其他原因。这是我的代码：

Server.js

//Module requires
var http = require("http"),
fs = require("fs"),
path = require('path'),
url = require('url'),
invoke = require("./invoke");


//Object "MIMETYPES"
//Maps relationships between file extensions and their respective MIME Content-Types    
var MIMETYPES = {
".html": "text/html",
".jpeg": "image/jpeg",
".jpg": "image/jpeg",
".png": "image/png",
".js": "text/javascript",
".css": "text/css"
};

//Object "invokeOptions"
//Options passed to Invoke() function for POST requests 
var invokeOptions = {
postData : "",
uri : ""
}

var PORT = 8888;

//HTTP Server Begin
http.createServer(function(req, res) {
var uri = url.parse(req.url).pathname;
    pathname = path.resolve(__dirname, "..") + uri;

console.log("Recieved " + req.method + " request for : " + uri);

invokeOptions.uri = uri;

//GET requests wrapper
if (req.method == "GET"){
    //Invoke() function handler for GET requests
    if (path.extname(pathname) == ""){
        invoke.invoke(invokeOptions, req, res);
        return;
    }

    //Static file server for GET requests
    fs.exists(pathname, function(exists) {
        if(!exists) {
            console.log("Requested file \'" + pathname + "\' doesn't exist.");
            res.writeHead(404, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var contentType = MIMETYPES[path.extname(pathname)];
        res.writeHead(200, {"Content-Type" : contentType});
        console.log("Current URI: " + uri + " has content type: " + contentType);

        fs.createReadStream(pathname).pipe(res);
        return;
    });
}

//POST requests wrapper
if (req.method == "POST"){
    var postData = "";

    req.on("data", function(postPacket) {
        postData += postPacket;
    });

    req.on("end", function() {
        invokeOptions.postData = postData;
        invoke.invoke(invokeOptions, req, res);
        return;
    }); 
}   
}).listen(PORT);

console.log ("Server listening on port: " + PORT);

Invoke.js - 处理非文件请求，即服务器上的函数请求

var fs = require("fs"),
querystring = require("querystring"),
path = require("path");

function invoke (options, req, res){
process.stdout.write("Invoking function --> ");

if (options.uri == "/"){
    console.log("Index");
    res.writeHead(200, {"Content-Type" : "text/html"});
    fs.createReadStream("../index.html").pipe(res);
    return;
}
if (options.uri == "/login"){
    console.log("Login");

    fs.readFile(path.resolve("../users.json"), "UTF-8", function(err, data){
        if (err) throw err;
        var json = JSON.parse(data);

        var user = querystring.parse(options.postData).username,
            password = querystring.parse(options.postData).password;

        console.log("Submitted Username:  " + user + "\nSubmitted Password:  " + password);

        if (json.users[0].username == user && json.users[0].password == password){
            res.writeHead(200, {"Content-Type" : "text/html"});
            fs.createReadStream("../app.html").pipe(res);
            return; 
        }
        else {
            res.writeHead(300, {"Content-Type" : "text/html"});
            fs.createReadStream("../login-fail.html").pipe(res);
            return; 
        }
    });     
}
else {
    console.log("Error! Bad request.");
    res.writeHead(400, {"Content-Type" : "text/plain"});
    res.end("Error 400: Bad Request. \nThere is no function corresponding to that request.");
}
}

exports.invoke = invoke;

Login-fail.js - 这是几乎没有加载的代码

$(document).ready(function() {
var current = 3;
var countdown = $(".countdown");

function down (){
    current--;
    if (current != 0){
         countdown.text(current);             
    }
    else {
    clearInterval(interval);
    window.location.replace("./");
    }

}
var interval = setInterval(down, 1000);
});

基本上，index.html文件是一个接受用户名和密码的表单，将提交的POST数据与json文件进行比较，如果它与json文件中的哈希值匹配则请求app.html，否则请求登录-fail.html。当调用login-html文件时，它已经链接到它的css和js，当请求几乎没有运行时！

另外，我认为应该注意的是，当请求css时，“content-type”的console.log是“text / javascript”，当它不起作用时。任何帮助都会受到大力赞赏！

Answer 1

神圣的废话。

路径名未被声明为每个请求的变量，因为我使用的是;而不是,

我现在会死去的女士们和男士们。

Answer 2

您在login-fail.html中使用的相对路径可能无法正确解析，因为网址路径无法更改（/login），因此浏览器正在寻找{{ 1}}和/login/css/style.css。尝试修改/login/js/login-fail.js以使用绝对路径而不是相对路径。

NodeJs中的静态HTTP文件服务器：有时外部.js和.css文件加载正常，有时他们不会？

2 个答案: