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 定义初始化数组函数
Sep 07 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
基于javascript编写简单日历
May 02 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
jQuery Ajax全解析
Feb 13 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JavaScript自定义超时API代码实例
Apr 30 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python ddt实现数据驱动
2018/03/14 Python
python版飞机大战代码分享
2018/11/20 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python3判断IP地址的方法
2021/03/04 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
童装店创业计划书
2014/01/09 职场文书
个性与发展自我评价
2014/02/11 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
安全教育月活动总结
2014/05/05 职场文书
体育馆的标语
2014/06/24 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB