VUE项目axios请求头更改Content-Type操作


Posted in Javascript onJuly 24, 2020

我就废话不多说了,大家还是直接看代码吧~

const httpServer = (opts, data) => {
 const token = localStorage.getItem('token')
 const PUBLIC = `?token=${token}`
 let httpDefaultOpts = ''
 var host = `${process.env.HOST}`
 var prot = `${process.env.PORT}`
 var base = host +(prot?":"+prot:"")
 if (opts.method === 'post') {
 httpDefaultOpts = {
  method: opts.method,
  url: `${base}${opts.url}${PUBLIC}`,
  	headers:{
				'Content-Type':'application/text/html;charset=utf-8' //改这里就好了
			},
  data: data
 }
 } else {
 httpDefaultOpts = opts
 }

 return new Promise(function (resolve, reject) {
 Axios(httpDefaultOpts).then(
  (res) => {
  successState(res)
  resolve(res)
  }
 ).catch(
  (err) => {
  errorState(err)
  reject(err)
  }
 )
 })
}

补充知识:Vue获取并存储服务器返回的AuthorizationToken信息并给每次请求添加上token

由于后台是用jwt的token进行身份权限验证,后台在登录后把token添加响应头里,所以前台需要把这个token存放起来,并给每次请求的请求头添加上token,服务器才能获取token进行身份认证。

前台使用vue项目:

loging.vue(登录组件)

{
 submitForm(formName) {
 this.$axios
 .post('/api/admin/login', {
 userName: this.ruleForm.userName,
 password: this.ruleForm.password
 })
 .then(successResponse => {
 this.responseResult = JSON.stringify(successResponse.data)
 this.msg = JSON.stringify(successResponse.data.msg)
 if (successResponse.data.code === 200) {
 this.msg='';
 localStorage.setItem('userName',this.ruleForm.userName);
 //获取并存储服务器返回的AuthorizationToken信息
 var authorization=successResponse.headers['authorization'];
 localStorage.setItem('authorization',authorization);
 //登录成功跳转页面
 this.$router.push('/dashboard');
 
 }
 })
 .catch(failResponse => {})
 }
 }

main.js(全局配置js):

//自动给同一个vue项目的所有请求添加请求头
axios.interceptors.request.use(function (config) {
 let token = localStorage.getItem('authorization');
 if (token) {
 config.headers['Authorization'] = token;
 }
 return config;
})

这里还需要考虑token过期失效的问题,博主将会在后续另写博客补充。

以上这篇VUE项目axios请求头更改Content-Type操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 #Javascript
vue在响应头response中获取自定义headers操作
Jul 24 #Javascript
vuex存取值和映射函数使用说明
Jul 24 #Javascript
js实现金山打字通小游戏
Jul 24 #Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 #Javascript
js实现滑动滑块验证登录
Jul 24 #Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 #Javascript
You might like
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
python判断完全平方数的方法
2018/11/13 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Python多线程获取返回值代码实例
2020/02/17 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
集体婚礼策划方案
2014/02/22 职场文书
刊首寄语大全
2014/04/11 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
消防宣传口号
2014/06/16 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
董事长新年致辞
2015/07/29 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python