当我在谷歌浏览器上打开开发人员工具时，为什么我的 css 代码文件有我的 html 源代码？

Question

I have the following problem when I run my web application, the HTML source code appears to be in the css file on chrome developers tool:我在运行 web 应用程序时遇到以下问题，HTML 源代码似乎在 chrome 开发人员工具的 css 文件中：

I have my HTML file called index.html and the following in the source.我的 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>

And the following is my CSS file called style.css以下是我的 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;

  }

when I run this code on the local server and opening the developer's tool on google chrome I see that the HTML source code is in the CSS file.[![The CSS file now has the HTML source running on the local server][1]][1] when I run this code on the local server and opening the developer's tool on google chrome I see that the HTML source code is in the CSS file.[![The CSS file now has the HTML source running on the local server][1] ][1]

Here is my Node.js这是我的 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

The problem is in your server request handler.问题出在您的服务器请求处理程序中。 You are manually sending index.html for every request made by the browser.您正在为浏览器发出的每个请求手动发送index.html 。 When you navigate to http://127.0.0.1:8005/ your server sends index.html so far so good but then the browser sees <link href="style.css" rel="stylesheet" type="text/css" title="Default Styles" and asks for http://127.0.0.1:8005/style.css but your server returns again index.html that's why it receives the content of index.html as it where style.css .当您导航到http://127.0.0.1:8005/时，您的服务器发送index.html到目前为止一切顺利，但随后浏览器看到<link href="style.css" rel="stylesheet" type="text/css" title="Default Styles" and asks for http://127.0.0.1:8005/style.css but your server returns again index.html that's why it receives the content of index.html as it where style.css . You need to filter your requests to the server in order to respond with the correct file.您需要过滤对服务器的请求，以便使用正确的文件进行响应。 In your case it could be like:在你的情况下，它可能是这样的：

 // 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); switch (request.url) { case '/': fs.readFile('index.html', function(err, data) { response.writeHead(200, { 'Content-Type': 'text/html' }); response.write(data); response.end(); }); break; case '/style.css': fs.readFile('style.css', function(err, data) { response.writeHead(200, { 'Content-Type': 'text/css' }); response.write(data); response.end(); }); break; default: response.end(); break; } }); // 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/");

Please note that this is a very basic server.请注意，这是一个非常基本的服务器。 It lacks error handling and is very hard to scale and maintain.它缺乏错误处理，很难扩展和维护。 Maybe you would like to try a node server framework like express也许您想尝试像express这样的节点服务器框架

当我在谷歌浏览器上打开开发人员工具时，为什么我的 css 代码文件有我的 html 源代码？

问题描述

1 个解决方案

解决方案1
1 2020-04-07 05:15:31

当我在谷歌浏览器上打开开发人员工具时，为什么我的 css 代码文件有我的 html 源代码？

问题描述

1 个解决方案

解决方案1 1 2020-04-07 05:15:31

解决方案1
1 2020-04-07 05:15:31