通过 post 请求发送嵌套对象

Question

我正在运行安装这个小节点快速服务器，它应该稍后检查凭证是否有效，然后将答案发送回客户端

这是我的代码

app.post('/voucher', function (request, response) {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Request-Method', '*');
    response.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
    response.setHeader('Access-Control-Allow-Headers', 'authorization, content-type');
      if ( request.method === 'OPTIONS' ) {
        response.writeHead(200);
        response.end();
        return;
      }
    console.log(request)
    let results;
    let body = [];
        request.on('data', function(chunk) {
        body.push(chunk);
      }).on('end', function() {
        results = Buffer.concat(body).toString();
        // results = JSON.parse(results);

        console.log('#### CHECKING VOUCHER ####', results)
        let success = {success: true, voucher: {name: results,
                                    xxx: 10}}
        success = qs.escape(JSON.stringify(success))

        response.end(success)

      } )
    }
  );

这显然只是一个示例，还没有实现实际检查。到目前为止，一切都很好。

现在在我使用 REACT 的客户端，我似乎无法解码我刚发送到那里的字符串。

我在做这个

var voucherchecker = $.post('http://localhost:8080/voucher', code , function(res) {   

  console.log(res)
  let x = JSON.parse(res)
  console.log(x)
  console.log(qs.unescape(x))

它给我错误

Uncaught SyntaxError: Unexpected token % in JSON at position 0

当我反过来做的时候

      let x = qs.unescape(res)
  console.log(x)
  console.log(JSON.parse(x))

它告诉我

Uncaught TypeError: _querystring2.default.unescape is not a function

也许你能帮帮我？我不知道这里有什么问题。谢谢。

另外一个问题代表，因为我只是一个初学者。有没有比我现在做的更聪明的方法来做这些事情？我有反应，在客户端上呈现，我有一个迷你快递服务器，在支付过程中与它交互几次。两个运行在不同的端口上。

执行此类操作的标准方法或最佳做法是什么？

Answer 1

我有点困惑为什么你的后端代码在请求中发生了这么多。既然你问有没有其他的写法，我就分享一下我是怎么写的。

服务器

看来你希望你的请求启用CORS，而且你本来想在你的请求正文中解析一个JSON。

这就是我建议您重新编写端点的方式

POST /voucher 接受正文请求 JSON

{
  code: "xxxxx"
}

并回复

{
  success: true, 
  voucher: {
    name: results,
    xxx: 10
  }
}

我建议您使用 express 的中间件功能，因为您可能会在大多数请求中使用 CORS 和解析 JSON，因此在您的项目中我会。

npm install body-parser
npm install cors

然后在您的应用程序初始化中

var bodyParser = require('body-parser')
var cors = require('cors')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json you can choose to just pars raw text as well
app.use(bodyParser.json())

// this will set Access-Control-Allow-Origin * similar for all response headers
app.use(cors())

您可以在各自的回购协议中阅读有关 body-parser and cors 的更多信息，如果您不想使用它们，我仍然建议您使用自己的中间件，以减少代码中的未来冗余。

到目前为止，这将替换您的这部分代码

response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Request-Method', '*');
response.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
response.setHeader('Access-Control-Allow-Headers', 'authorization, content-type');
  if ( request.method === 'OPTIONS' ) {
    response.writeHead(200);
    response.end();
    return;
  }
console.log(request)
let results;
let body = [];
    request.on('data', function(chunk) {
    body.push(chunk);
  }).on('end', function() {
    results = Buffer.concat(body).toString();
    // results = JSON.parse(results);

现在你的路由定义可以是

app.post('/voucher', function (request, response) {
  var result = request.body.code // added by body-parser
  console.log('#### CHECKING VOUCHER ####', result)
  // express 4+ is smart enough to send this as json
  response.status(200).send({
    success: true,
    voucher: {
      name: results,
      xxx: 10
    }
  })
})

客户

你的客户端可以，假设 $ 是 jquery 的 post 函数

var body = {
  code: code
}
$.post('http://localhost:8080/voucher', body).then(function(res) {   
   console.log(res)
   console.log(res.data)
   return res.data
})

通过 post 请求发送嵌套对象

Sending nested object via post request

json

node.js

query-string

express

reactjs

服务器

客户