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

 更新时间:2020年07月24日 11:59:48   作者:李美玲  
这篇文章主要介绍了VUE项目axios请求头更改Content-Type操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue单文件组件的如何使用方式介绍

    Vue单文件组件的如何使用方式介绍

    本篇文章主要介绍了Vue单文件组件的如何使用方式介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue element-ui表格内嵌进度条功能实现方法

    Vue element-ui表格内嵌进度条功能实现方法

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,下面这篇文章主要给大家介绍了关于Vue element-ui表格内嵌进度条功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Vue3封装 Message消息提示实例函数详解

    Vue3封装 Message消息提示实例函数详解

    这篇文章主要介绍了Vue3封装 Message消息提示实例函数,具有一定的实用价值,需要的朋友可以参考下,希望能够给你带来帮助
    2021-09-09
  • Vue 打包的静态文件不能直接运行的原因及解决办法

    Vue 打包的静态文件不能直接运行的原因及解决办法

    这篇文章主要介绍了Vue 打包的静态文件不能直接运行的原因及解决办法,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vue包大小优化的实现(从1.72M到94K)

    Vue包大小优化的实现(从1.72M到94K)

    这篇文章主要介绍了Vue包大小优化的实现(从1.72M到94K),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例

    vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例

    这篇文章主要介绍了vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • 简单了解前端渐进式框架VUE

    简单了解前端渐进式框架VUE

    这篇文章主要介绍了前端渐进式框架VUE的相关资料,文中讲解的非常细致,帮助大家开始学习VUE,感兴趣的朋友可以了解下
    2020-07-07
  • Vue中scrollIntoView()方法详解与实际运用举例

    Vue中scrollIntoView()方法详解与实际运用举例

    这篇文章主要给大家介绍了关于Vue中scrollIntoView()方法详解与实际运用举例的相关资料,该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域,需要的朋友可以参考下
    2023-12-12
  • 解决el-date-picker 宽度溢出浏览器的问题

    解决el-date-picker 宽度溢出浏览器的问题

    这篇文章主要介绍了解决如何el-date-picker 宽度溢出浏览器问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • Vue首屏加载过慢出现长时间白屏的实现

    Vue首屏加载过慢出现长时间白屏的实现

    本文主要介绍了Vue首屏加载过慢出现长时间白屏的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论