首先我在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"}}
所以我很困惑为什么会这样呢?
getParameter
拿的是 queryString 或者 表单 的数据如果需要拿json就要自己读 body、反序列化
500是后端报错,看后端的报错输出