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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
js版本A*寻路算法
Dec 22 Javascript
jQuery live
May 15 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
Angular网络请求的封装方法
May 22 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
php服务器的系统详解
2019/10/12 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
一个原生的用户等级的进度条
2010/07/03 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python封装原理与实现方法详解
2018/08/28 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
公司年会主持词
2014/03/22 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
辞职信如何写
2015/02/27 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
烈士陵园观后感
2015/06/08 职场文书
承诺书应该怎么写?
2019/09/10 职场文书