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调用WebService的示例
Apr 07 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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/02/16 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
vue实现微信分享功能
2018/11/28 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python贪心算法实例小结
2018/04/22 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python跳出双层for循环的解决方法
2019/06/24 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
数据库连接池的工作原理
2012/09/26 面试题
一些Unix笔试题和面试题
2013/01/22 面试题
便利店促销方案
2014/02/20 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
研讨会通知
2015/04/27 职场文书
Python合并pdf文件的工具
2021/07/01 Python
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
教你nginx跳转配置的四种方式
2022/07/07 Servers