前端json内容较大，后端接收到数据为null的解决方案

今天在做性能测试时遇到一个问题，耽误了一些时间，记录一下解决方法。

前端使用Vue框架，前端页面将JSON对象通过post请求发送给后端，数据量少时接口一切正常，在数据量大时发现后端接收到数据为null。通过浏览器中查看请求的body数据其实是正常的，先怀疑是后端的问题，怀疑是请求体的大小超过了服务器配置的限制，调试发现后端已经配置了服务器不限制请求体大小，又转向查找是否是前端的问题，最终确定是前端的问题。

首先，通过npm install 安装body-parser插件，在vue.config.js中，加入如下配置：

const bodyParser= require('body-parser')

module.exports = {

   devServer:{
    
     before: function(app,server){
       app.use(bodyParser.json(limit:'10mb'));
    }
    proxy:{
     /api: {
         ...
     } 
    }

  }

}

原因是当接收到post请求时，会首先接收请求头，然后是请求体，当请求体很大的时候，nodejs不会一次性读取全部内容，而是采用流的方式逐步接收，这就意味着在请求刚刚开始处理的时候，请求体还没有被完全接收。在请求处理程序的开始部分通过req.body查看请求体，可能会是空。要解决这个问题，可以通过body-parser来解析请求体，它会等待整个请求体被接收完毕，然后将其解析为js对象并存在req.body中。

vuejs.的devServer中，实际上使用了Express.js作为服务器，默认情况下，Express.js会限制请求体的大小，因为如果没有限制，服务器可能会收到大量数据的拖累从而导致服务器性能下降甚至崩溃，默认的限制大小是100kb。可以通过body-parse来改变这个限制，如上图所示。