如何在没有 Express 等的情况下 "run" 一个 HTML 网页

Question

我的问题可能和其他人很相似，但我已经阅读了很多答案，但我不完全理解它们背后的细节。

我必须创建一个 node.js REST API，但我之前没有上过任何课。所以我目前正在阅读和尝试教程来学习创建一个简单的 node.js 脚本。

我安装了 node.js，我创建了我的脚本（它只是读取一个输入字段），当我点击一个按钮时，它应该将输入写入控制台。

本教程只需要node.js，并使用.createserver。我知道 node.js 是服务器端的，没有它就无法解释。教程要求在浏览器中打开 .html 文件，直接用路径。 html 网页出现了，但是...当我按“确定”时，出现以下错误：

*app.js:1 Uncaught ReferenceError: require is not defined

Access to XMLHttpRequest at 'file:///.../ApplicationAngular/nodeProject/app.html?name=' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

GET file:///.../ApplicationAngular/nodeProject/app.html?name= net::ERR_FAILED*

Whosebug 上的所有线程都说明我需要第三方来运行 HTML 网页。但在教程中，一切正常，从未提及 Express、Cheerio 等的存在。

以下是代码示例： app.html

<input type="text" placeholder="Enter your name" id="name"/>
<input type="button" value="OK" onclick="valid()"/>
<div id="message"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="app.js"></script>
<script>
function valid() {
    $.get('', { name: $('#name').val() }, function(data) {
        $('#message').html(data.message);
    }, 'json');
}
</script>

app.js

var http = require('http');
var url = require('url');
var fs = require('fs');

var server = http.createServer(function (req, res) {
    var url_parts = url.parse(req.url, true); 
    var name = url_parts.query.name;

    if(name){
        console.log('Nom: ' + name);
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end(JSON.stringify({message: 'Hello' + name + ' !'}));
    } else {
        console.log('No name !');
        res.writeHead(200, {'Content-Type': 'text/plain'});
        fs.readFile('app.html', function (err,data)
        {
            res.end(data);
        });
    }
   
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

教程是否遗漏了什么？我是否必须安装 Express 才能查看网页网页？再次抱歉，英语不是我的母语。

非常感谢您的回答。

Answer 1

在你的 html

中加入这一行

<script src="app.js"></script>    <!-- wrong! -->

您尝试在浏览器的 javascript 解释器中运行您的 nodejs 程序。您需要运行它在您的服务器上。您的浏览器会在 require() 操作上出现问题，因为这些操作可以在您服务器上的 nodejs 中运行。

尝试从您的 html 中删除该行，并尝试在您的服务器命令行上执行类似的操作，然后从您的浏览器访问 http://localhost:1337。

 node app.js

浏览器和 nodejs 支持同一种语言这一事实在您理解这一点时有点令人困惑。语言相同，但两个运行时间环境完全不同。耐心一点。你会得到的。

您向我们展示的 app.js nodejs 程序应该可以正常运行。在其 if (name) 分支中，它处理来自浏览器中 $.get() 操作的请求。在其 else 分支中，它将 html 文件传送到浏览器。

而且，必须要说的是，不仅仅只使用 nodejs 做这种教程——没有 express 或其他一些网络服务器框架——会让 xxx 脖子感到巨大的痛苦，够痛苦的了在脖子上，你会很想开发自己的框架。

编辑你有这行两次

res.writeHead(200, {'Content-Type': 'text/plain'});   /* wrong! */

将两者都更改为

res.writeHead(200, {'Content-Type': 'text/html'});

Content-Type: text/html header 告诉您的浏览器将您的 html 文件解释为 html，而不是原始文本。

如何在没有 Express 等的情况下 "run" 一个 HTML 网页

How to "run" an HTML webpage without Express, etc

require

node.js

cors