时间戳

首页 > 解决方案 > 如何在没有 Express 等的情况下“运行”HTML 网页

node.js - 如何在没有 Express 等的情况下“运行”HTML 网页

问题描述

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

我必须创建一个 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*

StackOverflow 上的所有线程都说明我需要第三方来运行 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>

应用程序.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 才能查看网页吗？再次抱歉，英语不是我的母语。

非常感谢你的回答。

标签： node.jscorsrequire

解决方案

在您的 html 中使用这一行

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

您尝试在浏览器的 javascript 解释器中运行您的 nodejs 程序。您需要在您的服务器上运行它。您的浏览器无法执行这些require()操作，因为这些操作是在您服务器上的 nodejs 中工作的。

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

 node app.js

浏览器和 nodejs 支持相同的语言这一事实​​有点令人困惑，因为你已经弄清楚了。语言相同，但两个运行时环境完全不同。要有耐心。你会明白的。

您向我们展示的app.jsnodejs 程序应该可以正常运行。在其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头告诉您的浏览器将您的 html 文件解释为 html，而不是原始文本。

推荐阅读