链接 index.html client.js 和 server.js

分享于2022年07月17日 client html javascript node.js server 问答
【问题标题】:链接 index.html client.js 和 server.js(Link index.html client.js and server.js)
【发布时间】:2022-01-26 00:07:15
【问题描述】:

我从 Node.js 开始,我的第一个程序已经出现问题。下面是我正在使用的代码。索引.html:



  
    
    Random Temperatures
  
  
    
    
    


Client.js:

const textBox = document.getElementById('tb');
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
    var rnd = Math.floor(Math.random() * 100);
    textBox.value = rnd;
});

Server.js:

var app = require('http').createServer(response);
var fs = require('fs');
app.listen(8080);
console.log("App running…");
function response(req, res) {
    fs.readFile(__dirname + '/public/index.html',
    function (err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Failed to load file index.html');
        }
        res.writeHead(200);
        res.end(data);
    });
}

当我启动应用程序时,我转到浏览器,文本框和按钮出现。但是在浏览器控制台中,我收到了这些错误:

client.js:1 Uncaught SyntaxError: Unexpected token <

ContentScript.js:112 onResRdy 中的异常:TypeError:无法读取 未定义的属性“htmlRes”

localhost/:1 未经检查的 runtime.lastError: 无法建立 联系。接收端不存在。

我想我的问题是 3 个文件之间的链接,但我尝试了几件事,但我无法解决问题。我确定这是一个愚蠢的错误,但请原谅我,我才刚刚开始。有什么建议吗?

  • 我看到这个错误来自 McAfee chrome 扩展。在隐身模式或其他浏览器中是否会引发相同的错误?
  • 我在 Firefox 中遇到这些错误:localhost:8080 >> 来自“ localhost:8080/client.js ”的脚本已加载,即使其 MIME 类型 (“”) 不是有效的 JavaScript MIME 类型。 ||||| client.js:1 >> SyntaxError: 预期表达式,得到 '
  • 但是您在我的代码中没有看到关于文件链接的任何错误?
  • 不,我觉得不错
  • 肯定有什么小问题... ;-(

【解决方案1】:

浏览器(因为你有 <script src="/client.js"> )请求 /client.js

服务器:

  1. 获取请求
  2. 运行 response
  3. 读取 index.html
  4. 发送到浏览器

由于 index.html < 开头,因此浏览器在尝试将其作为 JavaScript 运行时会引发错误。

为什么当浏览器要求 client.js 时,你给它 index.html

您需要检查请求对象,确定请求的 URL,编写逻辑以返回具有正确状态代码和正确内容类型的 正确 资源,然后将其返回给客户。

Node.js documentation has an example of this ,但您可能应该停止尝试直接使用 createServer ——因为它涉及大量的轮子改造——改用 Express 并完成(非常短的) getting started guide ,其中包括一个关于使用 static 模块提供静态文件的部分。