javascript - Node.js 服务器使用 javascript 文件响应，而不是 main .html？

Question

我有一个简单的node.js服务器，它的目的是用我的index.html文档响应地址http://localhost:3000/hi/处的GET请求，但我不明白为什么它用(index)和index.js读取/响应。

我与路由器对象一起使用的函数是:

const http = require('http');
const path = require('path');
const fs = require('fs');

let contacts = {
    "1234": { 
        id: "1234",
        phone: "77012345678",
        name: "Sauron",
        address: "1234 Abc"
    },
    "4567": { 
        id: "4567",
        phone: "77012345678",
        name: "Saruman",
        address: "Orthanc, Isengard"
    },
};

let loadStatic = (req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html'});
    fs.readFile('./index.html', null, (err,data) => {
        if (err) {
            return console.log('error');
        } else {
            res.write(data);
        }
        res.end();
    });
}

let routes = [
    {
        method: 'GET',
        url: /^\/contacts\/[0-9]+$/,
        run: getContact
    },
    {
        method: 'DELETE',
        url: /^\/contacts\/[0-9]+$/,
        run: deleteContact
    },
    {
        method: 'GET',
        url: /^\/contacts\/?$/,
        run: getContacts
    },
    {
        method: 'POST',
        url: /^\/contacts\/?$/,
        run: createContact
    },
    {
        method: 'GET',
        url: /\/hi\//,
        run: loadStatic
    },
    {
        method: 'GET',
        url: /^.*$/,
        run: notFound
    }
];


let server = http.createServer((req, res) => {
    
    let route = routes.find(route =>
        route.url.test(req.url) &&
        req.method === route.method
    );
    route.run(req, res);
});

server.listen(3000);

Request URL: http://localhost:3000/hi/index.js
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade
Connection: keep-alive
Content-Type: text/html
Date: Mon, 20 Aug 2018 23:41:45 GMT
Transfer-Encoding: chunked

以上是 google chrome 浏览器处理后的响应。首先，我不知道(index)是什么 - 它包含我所有的html脚本，以及也一起发送的index.js(大概与html文档一起)，这是应该的javascript文件的名称控制 DOM。两者都包含 html 脚本，这是不正确的，.js 应该不同，并且它会尝试先读取 .js。另外，控制台中的错误显示“意外的'<'”，这应该是显而易见的，因为它试图读取一个只包含 .html 脚本的 .js 文件。我对此还很陌生，找不到答案。感谢您的阅读，并希望能够修改!

**编辑 - 我向服务器脚本添加了更多相关代码。很多经过编辑的函数，但这些都工作正常。但这一要求并非如此。 index.html、index.js(此文件控制 DOM 并获取 index.html 中的脚本标记)和 newserver.js(此文件的名称)位于我桌面上的同一文件夹中。希望有帮助。

Answer 1

index.js不与 index.html 一起“发送”正如你所想的那样。浏览器首先请求/hi 。当您发送该 HTML 文件的内容时，浏览器会解析该 HTML 文件并查找任何 <script src="xxx">它在 HTML(浏览器)中找到的标记，然后向您的服务器发出单独的请求，以获取脚本标记中的 src 文件，例如 index.js 。

因为您没有 /index.js 的路线，它将匹配您的 notfound路线(您没有显示其代码)。仅供引用，您的 notfound 路由可能应该返回 404 状态，因为这使调试变得更容易(浏览器控制台中会出现 404 错误，很容易看到)。

您将需要 HTML 文件引用的所有资源(脚本、CSS 文件、图像等)的路由。默认情况下，node.js 不提供任何文件(与其他一些 Web 服务器不同)。它仅服务于您专门为其编写路由并编写要发送的代码的文件。

可以编写一个通用路由来为特定目录中与请求完全匹配的任何文件提供服务。 Express 框架具有这样的功能，称为 express.static() 。它对于提供仅需要发送静态文件的静态资源非常有用。如果您打算继续编写自己的 http 框架而不使用已经构建的框架，您可能会想要编写这样一个静态匹配器。然而，重要的是，您将静态文件匹配器指向仅包含公共(public)文件的目录，这样人们就不会无意中访问私有(private)服务器文件。而且，我们必须防止像 .. 这样的事情。或者根路径也在 URL 中。