首页 > 其他分享 >Vue 登录login post请求 security UserDetailsService 获取参数为""

Vue 登录login post请求 security UserDetailsService 获取参数为""

时间:2023-04-18 17:34:43浏览次数:40  
标签:UserDetailsService username qs Vue 请求 post login postman

背景

原请求将数据放到params中,导致数据拼接在请求地址后面,具有高级安全隐患。

请求方法:
axios.request({
  url: '/login',
  method: 'post',
  params: {
    username: '****',
    password: '****'
  }
})

出现的问题

  1. 将params改成data,使数据放在请求体中,但后端自定义的UserDetailsService获取到的username为"",导致登录失败。
  2. 用postman发送改请求,登录成功。
  3. 取postman看到的请求头'Content-Type': 'application/x-www-form-urlencoded', 在请求中添加headers中并添加该参数,但后端还是同样问题。

解决方法

通过postman右边的</>按钮,选择nodeJS - Axios,发现需要引入qs对参数进行stringify,最终调整如下:

import qs from 'qs'
axios.request({
  url: '/login',
  method: 'post',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: qs.stringify({
    username: '****',
    password: '****'
  })
})

标签:UserDetailsService,username,qs,Vue,请求,post,login,postman
From: https://www.cnblogs.com/mjs-mark/p/17330427.html

相关文章

  • 客服系统vue源码聊天界面,ajax上传图片功能实现
    在线客服系统的聊天界面上,有上传图片按钮功能,使用js实现ajax上传图片功能html部分,有一个点击事件<divclass="iconExtendBtn"@click="uploadImg"><divclass="elIconel-icon-picture"></div>......
  • Vue3移动端适配解决方案
    导读:使用vw和vh解决适配问题vw:viewwidth屏幕宽度,1vw等于屏幕宽度的百分之一vh:viewheight屏幕高度,1vh等于屏幕高度的百分之一使用插件postcss-px-to-viewport可以自动将px转换为vw/vh安装npmipostcss-px-to-viewport-Dvite.config.tsimportvuefrom'@vitejs/plugin......
  • 【Vue2.x源码系列06】计算属性computed原理
    上一章Vue2异步更新和nextTick原理,我们介绍了JavaScript执行机制是什么?nextTick源码是如何实现的?以及Vue是如何异步更新渲染的?本章目标计算属性是如何实现的?计算属性缓存原理-带有dirty属性的watcher洋葱模型的应用初始化在Vue初始化实例的过程中,如果用户options选......
  • postman参数化
    一、设置全局变量或者环境变量全局变量:作用范围是针对postman下面所有测试集均生效环境变量:只对选择了对应环境的测试集生效1.打开Postman,点击右侧的Environments2.选择Global,设置全局变量,或者新建一个环境变量3.输入你要设置的变量名和变量,点击Save,进行保存4.引用全局/......
  • vue全家桶进阶之路37:Vue3 路由守卫
    在Vue.js3.x中,我们可以使用路由守卫来拦截路由的跳转,从而实现一些功能,例如:登录验证、页面权限控制等。Vue.js3.x中的路由守卫和Vue.js2.x中的基本相同,都包含了beforeEach、beforeResolve和afterEach等钩子函数。下面是一些常见的路由守卫用法示例:beforeEachbefo......
  • vue不同页面方法调用|跨页面传参|事件总线
    事件总线需要在不同页面间传递参数或者进行方法调用,可以使用事件总线1.引入中间js在src下的Utils文件夹下创建一个Bus.js其内容如下importVuefrom'vue'exportdefaultnewVue()2.A页面(发起请求)importEventfrom'@/utils/Bus'Event.$emit('getlog',参数)3.B页面(......
  • vue3微信公众号商城项目实战系列(7)自定义底部tabbar组件
    在开始之前,先看看官方对组件的定义: vue3的生态非常丰富,有各种各样的开源组件库可以拿来就用,比如vant、element-ui等,本系列不使用任何第3方组件,完全使用原生的语法来写,只为聚焦vue3技术本身,本篇写一个自定义tabbar组件,效果如下图所示:要实现如下功能:1.底部tab项固定3个:首页......
  • vue全家桶进阶之路33:Vue3 计算属性computed
    在Vue3中,计算属性可以使用computed函数来定义。computed函数接受两个参数:第一个参数是一个函数,该函数返回计算属性的值;第二个参数是一个可选的配置对象,可以包含getter和setter函数,以及控制计算属性缓存的缓存配置。Vue3中的计算属性与Vue2中的计算属性相比有以下几个变化:使用......
  • 直播app源码,使用vue-awesome-swiper创建轮播图幻灯片
    直播app源码,使用vue-awesome-swiper创建轮播图幻灯片1.引入引入方式可以参考官方文档,两种方式选一种即可:vue-awesome-swiperatv3.1.3 (1)第一种方式:在main.js入口文件中全局引入 ///src/main.js //swiper全局引入importVueAwesomeSwiperfrom'vue-awesome-swiper'im......
  • vue项目使用定时器每隔几秒运行一次某方法
    代码如下:data(){return{timer:null,//定时器名称};},created(){this.setTime();},beforeDestroy(){clearInterval(this.timer);//清除定时器this.timer=null;},methods:{setTime(){//每隔一分钟运行一次保存方法this.timer......