Question

运行Web应用程序时出现以下问题，HTML源代码似乎在chrome开发人员工具的css文件中：

我的HTML文件名为index.html，以下为源文件。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Node</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet"  type="text/css" title="Default Styles" 
   media="screen">


 </head>

 <body>
    <h1> Welcome to my first node.js Website </h1>

    <h2> this is how you and where you do the mark up in node js</h2>





    <!-- footer -->
    <div class= "base">
        <footer>
            <nav>

            </nav>
        </footer>
    </div>


</body>
  </html>

以下是我的CSS文件，称为style.css

  html, body{
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
  background: skyblue;
  color: #fff; 

  }


 /*
footer 
 */

 .base{

  height: 50px;
  width: 100%;
  background-color: black;
  border-bottom: 1px solid rgba(221, 221, 221, 0.13);
  bottom: 0%;
  position: fixed;

  }

当我在本地服务器上运行此代码并在google chrome上打开开发人员的工具时我看到HTML源代码在CSS文件中。[！[CSS文件现在具有在本地服务器上运行的HTML源代码] [1]] [1]

这是我的Node.js

  // Load the http module to create an http server.
    var http = require('http');
    var fs   = require('fs');




 var server = http.createServer(function (request, response) {
   console.log('request was made:' + request.url);

  fs.readFile('index.html', function(err,data){
 response.writeHead(200, {'Content-Type' : 'text/html'});
 response.write(data);
 response.end();
   });


 });



  // Listen on port 8000, IP defaults to 127.0.0.1
     server.listen(8005);

   // send a  message on the terminal
    console.log("Server running at http://127.0.0.1:8005/");

Answer 1

问题出在服务器请求处理程序中。您正在为浏览器的每个请求手动发送not a number。当您导航到index.html时，服务器发送的http://127.0.0.1:8005/到目前为止效果很好，但是浏览器看到index.html并要求输入<link href="style.css" rel="stylesheet" type="text/css" title="Default Styles"，但是服务器再次返回http://127.0.0.1:8005/style.css，即为什么它在index.html处收到index.html的内容。您需要过滤对服务器的请求，以使用正确的文件进行响应。在您的情况下，可能像这样：

style.css

请注意，这是一个非常基本的服务器。它缺乏错误处理，并且很难扩展和维护。也许您想尝试像express

这样的节点服务器框架

在Google Chrome上打开开发人员工具时，为什么我的CSS代码文件具有html源代码？

1 个答案: