vue+element+admin脚手架 axios发送POST请求后 springboot后台获取不到请求体内的参数 ？-灵析社区

axios 向springboot后台发送post请求传入json格式的值 后台@RequestBody获取不到传入的参数，不报错也不向下执行 ## 第五天 （为了让大家读到我的问题最新发展我选择倒着排序） 下面是本项目的 mock-server.js文件 const chokidar = require('chokidar') const bodyParser = require('body-parser') const chalk = require('chalk') const path = require('path') const Mock = require('mockjs') const mockDir = path.join(process.cwd(), 'mock') function registerRoutes(app) { let mockLastIndex const { mocks } = require('./index.js') const mocksForServer = mocks.map(route => { return responseFake(route.url, route.type, route.response) }) for (const mock of mocksForServer) { app[mock.type](mock.url, mock.response) mockLastIndex = app._router.stack.length } const mockRoutesLength = Object.keys(mocksForServer).length return { mockRoutesLength: mockRoutesLength, mockStartIndex: mockLastIndex - mockRoutesLength } } function unregisterRoutes() { Object.keys(require.cache).forEach(i => { if (i.includes(mockDir)) { delete require.cache[require.resolve(i)] } }) } // for mock server const responseFake = (url, type, respond) => { return { url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`), type: type || 'get', response(req, res) { console.log('request invoke:' + req.path) res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond)) } } } module.exports = app => { // parse app.body // https://expressjs.com/en/4x/api.html#req.body app.use(bodyParser.json()) app.use(bodyParser.urlencoded({ extended: true })) const mockRoutes = registerRoutes(app) var mockRoutesLength = mockRoutes.mockRoutesLength var mockStartIndex = mockRoutes.mockStartIndex // watch files, hot reload mock server chokidar.watch(mockDir, { ignored: /mock-server/, ignoreInitial: true }).on('all', (event, path) => { if (event === 'change' || event === 'add') { try { // remove mock routes stack app._router.stack.splice(mockStartIndex, mockRoutesLength) // clear routes cache unregisterRoutes() const mockRoutes = registerRoutes(app) mockRoutesLength = mockRoutes.mockRoutesLength mockStartIndex = mockRoutes.mockStartIndex console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`)) } catch (error) { console.log(chalk.redBright(error)) } } }) } 最后发现把 vue.config 里面的 before: require('./mock/mock-server.js'),这一句干掉 devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, // before: require('./mock/mock-server.js'), proxy: { '/api': { target: "http://localhost:8088", sercure: false, changeOrigin: true, pathRewrite: { "^/api": "" } } } }, 然后访问就正常了。 所以问题出现在mock，但是我依旧需要mock做数据模拟，故而只有研究到底是哪儿的代码导致请求体里面的数据变为空。 ## 第四天 研究了好几天研究了好久，发现更基础的点（为了让大家读到我的问题最新发展我选择倒着排序） **首先： 问题是“vue框架采用的axios，利用proxy做了跨域代理，前台使用axios先后台提交各种申请（除了get方式外）将传递参数需要放入 请求body传输 的请求后台通过 Springboot接受一律接受不到 ”** **前台展示(不知是否有二次封装的影响，所以尝试原生axios提交请求)** //输入进来的data为一个键值对对象 //第一种尝试 return axios({ method: 'post', url: 'api/user/login', data:qs.stringify(data) //此时Content-Length为application/x-www-form-urlencoded }) //输入进来的data为一个键值对对象 //第二种尝试 return axios({ method: 'post', url: 'api/user/login', data:JSON.stringify(data), headers:{ "Content-Type":"application/json" }//此时 Content-Type 为 application/json }) **后台为方便一律采用HttpServletRequest 接收** @RequestMapping ("/user/login") public String login(HttpServletRequest paramLogin) throws IOException { System.out.println(System.currentTimeMillis()+"\n"); System.out.println("收到参数"); System.out.println(paramLogin.getReader().readLine()+" [ { rel: 'preload', // to ignore runtime.js // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171 fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], include: 'initial' } ]) // when there are many pages, it will cause too many meaningless requests config.plugins.delete('prefetch') // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() config .when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk config.optimization.runtimeChunk('single') } ) } } ### 第三天 .... ### 第二天 继续尝试：添加判断用HttpServletRequest获取请求报文的相关信息。 String contentLength = paramLogin.getHeader("Content-Length"); if (contentLength != null && Integer.parseInt(contentLength) > 0) { // 可以读取请求体 BufferedReader reader = paramLogin.getReader(); System.out.println(reader+" this is reader"); System.out.println("contentLength: "+contentLength); String line; if ((line = reader.readLine()) != null) { // 进入循环 while ((line = reader.readLine()) != null) { System.out.println("while+1"); System.out.println(line); } } else { // 请求体为空，不需要读取 System.out.println("失败"); } // 进行读取操作 } else { System.out.println("出错啦"); // 不需要读取请求体 } #### 1.对于axios发送过来的信息 成功获取Header，对Body做数据流读取的时候失败，依旧是无数据 收到参数 application/json org.apache.catalina.connector.CoyoteReader@21bc0330 this is reader contentLength: 35 收到参数 null 出错啦 #### 2.用IDEA自带的Http服务测试功能测试 ### POST http://localhost:8088/user/login Content-Type: application/json { "user_name": "qwee", "password": "21" } 成功有数据结果 收到参数 application/json this is reader： org.apache.catalina.connector.CoyoteReader@21bc0330 contentLength: 45 "user_name": "qwee", "password": "21" 由此可以判断我的axios发送的请求报文似乎有问题，现在继续尝试。qaq帮帮孩子 ### **前台** export function login(data) { //输入进来的data为一个键值对对象 return request({ url: '/user/login', method: 'post', data, headers:{ "Content-Type":"application/json" } }) } 发送的请求信息为user_name:rose password：1   ### 后台 @PostMapping ("/user/login") public void login(@RequestBody ParamLogin paramLogin){ System.out.println("收到参数"); System.out.println(paramLogin.getUser_name()+" "+paramLogin.getPassword()); } @Data @EqualsAndHashCode(callSuper = false) public class ParamLogin implements Serializable { // @JsonProperty("user_name") private String user_name; // @JsonProperty("password") private String password; } 结果就是后台输出执行不到 System.out.println("收到参数"); 我主观觉得 @RequestBody 为和获取到值。 尝试使用过HttpServletRequest request获取请求的body，但是 request.getInputStream().available() 又为 0表示body里面没值。 同时用apifox测试过后端API 可以接收到post 的json数据。   但是axios的无论是封装后还是原生的都无法接收到post的值。