vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

这篇具有很好参考价值的文章主要介绍了vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、错误回现(前后端错误演示)

axios封装-我常用的请求头参数 application/json; charset=utf-8

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

页面登录请求-post

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

网络请求正常传入参数

后端代码,查看控制台发现都为null,没取到值。

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

二、解决

1.尝试将前端post请求改成get,其他都不用变

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

发现正常取到值,打印输出正常。前端页面正常跳转。

2.后端设置为post请求,前端axios要配置请求头参数

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

还要再对数据再进行一次格式化(qs)

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

然后再去验证

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

后端控制台正常输出。

三、结论

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

后来查阅资料发现,只要我们前端只要传入对象格式的参数时,axios就会对我们的数据进行JSON.stringify的操作。也就是说,将我们的 Content-Type 变成了 application/json;charset=utf-8。
axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。

而后端接口使用@RequestParam注解就必须设置axios的请求头为 application/x-www-form-urlencoded

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,java

@RequestParam接收的参数是来自HTTP请求体( Content-Type必须为 'application/x-www-form-urlencoded )

axios发送post请求后台springboot控制器处理方法参数,vue.js,前端,javascript,前端框架,spring,javahttpService.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

列出以下其他的值

httpService.defaults.headers['Content-Type'] = 'application/json; charset=utf-8';

上传图片最好是单独封装一个

export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

分享就到这里了~~~~文章来源地址https://www.toymoban.com/news/detail-781460.html

到了这里,关于vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 再vue项目中使用axios原生发送post请求

    前言:在大多数项目开发中,都是采用前后端分离架构,在此情况下都采用一些成熟的框架,类似于ruoyi,因为成熟所以前端的请求都进行了各种封装,有时想单独发起一个简单的请求,还有点麻烦,因此记录一下。 因为是前后端分离,当前前端使用的端口是81,后端运行的

    2024年02月14日
    浏览(34)
  • vue2项目打开浏览器请求后端时出现POST http://localhost/user/login net::ERR_CONNECTION_REFUSED

    vue2项目打开浏览器请求后端时出现POST http://localhost/user/login net::ERR_CONNECTION_REFUSED      解决方法:找到.env.development补全VUE_APP_BASE_API = \\\'http://localhost\\\'后面的端口号 修改前 修改后  重新运行vue项目,即可正常运行   文章只为记录自己遇到的错误。  

    2024年02月16日
    浏览(31)
  • VUE项目使用axios发送post跨域请求,返回数据失败问题

    Access to XMLHttpRequest at \\\'http://xxxx\\\' from origin \\\'http://localhost:8080\\\' has been blocked by CORS policy: Response to preflight request doesn\\\'t pass access control check: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource. 第一步 ,在后端接受方,对返回的数据添加 响应头 ,使用下面这句代码: 第二步

    2024年02月11日
    浏览(38)
  • Vue使用axios用post方式将表单中的数据以json格式提交给后端接收

    1.后端controller层代码代码 我采用的接收形式数据是json格式 2.前端登录注册界面代码 3.遇到的问题: 3.1. 我们首先在Vue data中定义一个存放表单数据的registform{},然后给它添加上属性,在表单input处使用v-model绑定。 3.2. 接下来将registform保存到datata变量中,然后就是axios的发送请

    2023年04月27日
    浏览(39)
  • vue2使用axios封装请求数据,教会你封装,简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年01月24日
    浏览(34)
  • SpringBoot+Vue 后端输出加密,前端请求统一解密

    针对客户对数据交互过程中的加密要求,防止直接的数据爬取,对前后端数据请求时的返回数据进行数据的加密。实用性嘛,也就那样了,代码可直接适配Ruoyi SpringBoot+vue项目,具体加密方式和处理仅供参考! 前端 request.js des.js 后端java

    2024年02月09日
    浏览(34)
  • 前端发起请求,后台springboot无响应

    1.检查是不是HTTPS请求 2.检查域名有没有放到开发者工具的合法域名中 3.检查POST请求的content-type类型是不是application/x-www-form-urlencoded和application/json 4.检查请求get或者post 有没有大写 POST 因为公司的服务器是window系统,所以在部署项目的时候使用命令行java -jar 的方式去运行,这个

    2023年04月09日
    浏览(29)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(43)
  • axios get/post/delete上传下载及springboot后端示例

    记录axios各种使用方法,包括get/post/delete上传下载多种写法及springboot后端示例 以下示例基于浏览器环境,直接使用html直接引入axios资源 三种类型的Content-Type 请求方式 2.1 JSON 格式数据(最常用) Content-Type: application/json 2.2 FormData 数据格式(用于上传文件等场景) Content-Type: multipa

    2024年02月07日
    浏览(36)
  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用)

    官网: https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库: npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios: import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中,实现数据共享,节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包