关于Vue.axios 与 Servlet POST请求问题

Question

首先我在vue.config.js 加上了devServer

module.exports = {
    configureWebpack: config => {
        
      },
      devServer:{
        proxy: {
            "/api": {
              target: "http://localhost:3000",
            }
          }
      }
  } 

首先我用axios请求POST

addUser:function () {
      axios.post('/api/reguser?name=sds&password=2&age=1&sex=man&company=ali')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
    

然后我用Servlet的req.getParameter的方法获取前端传来的POST字段！
我可以正常接受！
然后我对数据做了封装！

addUser:function () {
          axios.post('/api/reguser',{
              data
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
        }
    

那么出现了一个问题就是axios会把data放在请求的body中，我后台获取不到这样的数据了
并且前端会报错误

xhr.js?b50d:178 POST http://localhost/api/reguser 500 (Internal Server Error)
dispatchXhrRequest @ xhr.js?b50d:178
xhrAdapter @ xhr.js?b50d:12
dispatchRequest @ dispatchRequest.js?5270:59
Promise.then (async)
request @ Axios.js?0a06:51
Axios.<computed> @ Axios.js?0a06:71
wrap @ bind.js?1d2b:9
REGUSER @ store.js?c0d6:14
wrappedMutationHandler @ vuex.esm.js?2f62:725
commitIterator @ vuex.esm.js?2f62:391
(anonymous) @ vuex.esm.js?2f62:390
_withCommit @ vuex.esm.js?2f62:521
commit @ vuex.esm.js?2f62:389
boundCommit @ vuex.esm.js?2f62:334
submitForm @ RegUser.vue?f8a0:88
click @ RegUser.vue?9bd0:125
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3882
Vue.<computed> @ backend.js:1140
handleClick @ element-ui.common.js?5c96:9271
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
store.js?c0d6:21 Error: Request failed with status code 500
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:18)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:77)

于是我查了相关问题，顺利的解决了后端接受不到json对象的问题

StringBuilder builder = new StringBuilder();
        try {
            BufferedReader bufferedReader = req.getReader();
            char[] buff = new char[1024];
            int len;
            while((len = bufferedReader.read(buff)) != -1){
                builder.append(buff,0,len);
            }
        }catch (IOException e){
            System.out.println(e);
        }

但是我前端每次请求都会报错

POST http://localhost/api/reguser 500 (Internal Server Error)

但是后端能正常的接受到数据

{"data":{"name":"23","password":"23","age":"23","sex":"男","company":"23"}}

所以我很困惑为什么会这样呢？

Answer 1

getParameter拿的是 queryString 或者 表单 的数据
如果需要拿json就要自己读 body、反序列化

500是后端报错，看后端的报错输出