如何将数据作为响应从 Node.js 服务器发送到 AJAX 客户端？答案

【问题标题】：How do I send data as a response from Node.js server to AJAX client?如何将数据作为响应从 Node.js 服务器发送到 AJAX 客户端？
【发布时间】：2018-07-20 16:05:25
【问题描述】：

所以我调用这个函数来发送关于 HTML 元素的数据作为一个对象：

function postItem(input) {
  $.ajax({
    type: "POST",
    url: "http://localhost:8080",
    data: input,
    success: function(message) {
      Hconsole.log('got data back');
      var m = message;
      alert(m);
    },
    error: function(jqXHR, textstatus, errorThrown) {
      alert('text status ' + textstatus + ', err ' + errorThrown);
    }
  })
}

服务器将输入的对象与已存储的对象进行比较，并以它们是否相同进行响应：

app.post('/', (req, resp) => {
  var eObjClient = req.body;

  //somehow get data from database, the following is dummy data
  var eObjServer = {
    type: 'I',
    text: '',
    width: '70',
    height: '80',
    href: '',
    color: 'rgb(255, 255, 255)',
    class: 'icon-big icon ion-ios-analytics-outline'
  };

  /*
  Object.keys(eObjClient).forEach(function(key){
    console.log(key + ": " + eObjClient[key]);
  });
  */

  if (isSimilar(eObjClient, eObjServer)) {
    console.log('step working');
    resp.send('step working');
  } else {
    console.log('broken');
    resp.send('broken');
  }
  resp.end();
});

当前服务器获取数据并进行计算正常，但客户端的错误消息总是被调用，我不知道为什么。此外，如果有帮助，我会在客户端控制台上不断收到此错误：

"加载失败http://localhost:8080/: 否请求中存在“Access-Control-Allow-Origin”标头资源。因此，不允许访问 Origin 'null'。"

我正在使用库 Express.js 和 body-parser。我是服务器的初学者，任何帮助将不胜感激。

【问题讨论】：

你也不应该在res.send()之后调用res.end()，因为后者在后台调用了前者，你会因为调用它两次而出错。

标签： javascript jquery node.js ajax server

【解决方案1】：

这是因为你的客户端和服务器是跨域的，所以浏览器屏蔽了它。

你可以试试你的 Node.js：

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

但是，重要的是要注意它允许任何连接，不应在生产中使用。

【讨论】：

【解决方案2】：

只需放入 CORS 中间件，您的客户端 AJAX 请求就会正常运行。您可以通过以下方式使用此库：https://github.com/expressjs/cors：

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

【讨论】：

谢谢，这很好用。但是有一个问题，这在生产中使用是否安全？

【解决方案3】：

你应该改变你的逻辑：

    let message = '';

    if(isSimilar(eObjClient, eObjServer)) {
      console.log('step working');
      message = 'step working';
    }
    else {
      console.log('broken');
      message = 'broken';
    }
    resp.status(200).send(message);

对于您的 CORS 问题，我建议设置适当的标头或使用 cors library。

【讨论】：

对不起，我是初学者；我将如何设置标题或使用 cors？非常感谢。
当然，可以在您的响应中设置标题，就像 Lady_A 的回答一样，在您的逻辑之前。基本上，这是一种阻止其他用户使用您的应用程序的安全方法。如果您使用 cors npm 包，只需按照安装说明并添加您的 app.js 这一行以将其设置为中间件：app.use(cors())