如何使用客户端javascript将数据发送到node.js服务器_Javascript_Node.js

如何使用客户端javascript将数据发送到node.js服务器

javascript node.js

如何使用客户端javascript将数据发送到node.js服务器,javascript,node.js,Javascript,Node.js,我目前有一个node.js托管的网页，它有一个文本框和一个提交按钮。每当您键入某个内容并单击按钮时，客户机都应该获取框中的任何内容，并将其发送到另一个端口上的服务器我已经有了一个名为sendRequest（）的函数，它会在每次单击时执行此操作 function sendRequest() { $.get("http://***.***.***.**:8181/", {message:$("#messageBox").val()}, function(data){ console.log

我目前有一个node.js托管的网页，它有一个文本框和一个提交按钮。每当您键入某个内容并单击按钮时，客户机都应该获取框中的任何内容，并将其发送到另一个端口上的服务器

我已经有了一个名为

sendRequest（）

的函数，它会在每次单击时执行此操作

function sendRequest() {
$.get("http://***.***.***.**:8181/", {message:$("#messageBox").val()}, function(data){
    console.log(data);
});
$("#messageBox").val("");}

但我的主要问题是如何让node.js服务器监听这些输入，并将从客户端接收到的任何内容导出到服务器目录上的

temp.txt

如果有人能带我找到一个npm包，或者留下一个代码示例，那将非常有帮助

编辑：我的服务器托管看起来像

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
          path += "index.html"
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);
})}
else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(8080);
console.log("Listening at http://localhost:8080")

您可以在服务器上托管的API上使用特定url并向其发出请求。尽管在典型的浏览器（客户端）上，如果试图访问不同的域或端口，您可能会面临CORS限制

----编辑---

因为我想让他知道这是怎么解决的。即使我没有绕过CORS限制，也可以通过在每个响应中从源服务器添加以下头来实现

访问控制允许来源：*

访问控制允许方法：GET、POST、OPTIONS

记录每一次击键的代码如下所示，尽管这是在同一台服务器上，没有allow COR

要求：express，body解析器

npmi-S表示体解析器

test.html

<html>
<head>
<title>test</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="text" height="100" width="400" id="grabme"></input>
<script>
    
    $('#grabme').keypress(function(event){
        axios.post('/Mr-KeyLogger', {
            character: event.key
        }).then(function (response) {
            console.log(response);
        }).catch(function (error) {
            console.log(error);
        });
    });

</script>
</body>
</html>

您可以通过编辑代码的方式将其与CORS一起使用，只需替换axios post请求中的url，源服务器中包含的CORS头，瞧

您显示了客户端代码，但没有提供node.js服务器正在做什么的详细信息。它只是http服务器包中的一个静态文件服务器，还是一个express应用程序或其他什么？通常情况下，其中一个实例将仅侦听一个端口。例如，如果您设置了一个express应用程序为您的页面提供服务，并且该应用程序正在8080端口上运行，那么它也将在同一端口上侦听CRUD请求（

GET

，

POST

，

PUT

，

DELETE

，…）。您的客户端只需将请求发送回该原始端口。当然，服务器代码需要逻辑来处理请求。看看用express编写的一个基本CRUDAPI就足够了。Express的on routing说明了这个逻辑是多么简单

没有任何细节说明为什么您必须使用与为您的客户提供服务的端口不同的端口，我只能猜测用例。因此，如果您的服务器不是包含您的客户端代码的页面的来源，则我们需要有关您正在与之交互的服务的更多信息：

它支持CORS吗
它有API吗？它使用什么交换格式（XML、JSON）

从您最初的问题来看，在我看来，您只是想将数据发送回页面的原始服务器（忽略不同的端口要求）。这是最常见的情况。否则，

您的服务器正在侦听端口8000，您正在发送到端口8181，您希望服务器侦听吗？这是不合逻辑的

无论如何，您可以做一个技巧：让来自端口8181的请求转发到8000

使用express package并创建一个函数和调用，您可以从浏览器控制台共享消息吗？2分钟后我将演示如何。。如果我能证明的话，就投票吧！：）试试看，我的朋友……：）它加载index.html，但不加载index.html调用的任何内容，因为它应该演示如何保存来自文本字段的输入，而不是托管web服务器。服务器已添加。服务器只是简单地托管一个html文件以及css和javascript文件。我甚至还没有开始制作我的接收端服务器，因为我不知道从哪里开始

const express = require('express')  
const util = require('util')
const fs = require('fs')
const bodyParser = require('body-parser')
const app = express()
const port = 80

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.get('/test', (request, response) => {  
  fs.readFile('test.html', 'binary', function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      headers["Content-Type"] = "text/html";
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
      return
  }) 
})
app.post('/Mr-KeyLogger', (request, response) => {
    fs.appendFile('temp.txt', request.body.character, function(err) {
      if (err) {
        response.writeHead(500);
        response.end();
        return
      }
      response.writeHead(200);
      response.write('gotcha');
      response.end();
      return
    })
})

app.listen(port, (err) => {  
  if (err) {
    return console.log('something bad happened', err)
  }

  console.log(`server is listening on ${port}`)
})