NodeJs：如何从 HTML 前端访问 JavaScript 后端的功能？

Question

这是我在 index.html 中的 HTML 代码。

<!DOCTYPE html>
<html>
    <body>
        <button type="button" onclick="stuff()">Click</button>
        <script>
            async function stuff() {
                await connectToServer();
            }

            async function connectToServer() {
                const xhttp = new XMLHttpRequest(); 
                xhttp.onload = function() { 
                    alert(this.responseText); 
                }; 
                xhttp.open('GET', 'C:/Users/myName/myFolder/index.js', true); 
                xhttp.send();
                return;
            }
        </script>
    </body>
</html>

然后，这是我在 index.js 中的后端代码。

const express = require('express');
const axios = require('axios');
const port = process.env.PORT || 8080;
const app = express();

app.get('/', (req, res) => {
    res.sendFile('C:/Users/myName/myFolder/views/index.html');

});

app.listen(port, () => console.log(`Listening on port ${port}`));

我可以在命令行输入 node index.js 和运行这个程序，然后转到 http://localhost:8080/ 。当我这样做时，html 页面会按预期显示。但是，当我单击按钮以向服务器端发出 GET 请求时，我收到控制台错误 Not allowed to load local resource: file:///C:/Users/myName/myFolder/index.js 。顺便说一句，我正在使用Google Chrome。

我知道这是一个安全问题，您应该向 Web 服务器上的文件发出请求（它们以 http 或 https 开头）。那么我想，我的问题是：

如何使我的服务器文件 index.js 可以被视为在服务器上，以便我可以从前端调用后端的函数？

Answer 1

您必须向服务器提供的 URL 发出 HTTP 请求。

您的服务器提供的唯一 URL 是 http://localhost:8080/（因为您在本地主机上运行设置了一个 HTTP 服务器，已将其配置为运行在端口 8080 上，并让 app.get('/', ...) 提供唯一的路径。

如果你想支持其他URL，那么就用类似的方式注册它们，然后写一个路由来处理它们。

The express documentation 可能会有用。

您不需要将 server-side 代码加载到浏览器中。这是 server-side 代码。它运行在服务器上。这不是 client-side 代码。它不会在浏览器中运行。浏览器不需要访问它。

如果您想从服务器加载一些实际的 client-side JS，请使用 <script src="url/to/js"></script>（而不是 Ajax）并配置 express' static middleware.

Answer 2

让我们通过将后端 API 进程与前端托管进程分开来改善您当前的流程。虽然后端可以，但它不适合提供静态 html 文件（尤其是对于本地开发目的）。

运行你的后端照常，node index.js。但是一旦此命令变得更加复杂，您可能会想使用 npm scripts and do just npm start)
运行单独的前端服务器进程。查看 parcel, snowpack, DevServer。它可以像 npx parcel index.html 一样简单，但随着您对工具功能的了解，此命令可能会经常更改。
要调用后端，只需将一个 API 端点添加到 Express 应用程序（就像您已经为提供静态内容所做的那样），然后使用后端进程调用它 URL.

通常，您会在 http://localhost/ 上看到您的应用，它应该向 http://localhost:8080/ 发送请求。

如果出于某种奇怪的原因你想从你的服务器动态下载 js 文件来执行它，你只需要从你的前端托管进程提供这个文件。为了做到这一点，不同的开发服务器有不同的技术，但通常您只需指定您希望可用的文件扩展名和路径。

编辑前端文件后，您将在浏览器中看到hot-reload。您可以使用各种工具为节点进程实现相同的功能（从 nodemon 开始谷歌搜索）

如果您觉得这种操作方式不理想，请尝试改进它，并查看人们已经在这个方向上做了什么。例如，您可以运行两个进程与 concurrently.

并行

NodeJs：如何从 HTML 前端访问 JavaScript 后端的功能？

NodeJs: How do I access the functions of my JavaScript backend from my HTML frontend?

javascript

node.js

server