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计算属性想要传入参数如何解决问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue数据双向绑定的注意点

    vue数据双向绑定的注意点

    这篇文章主要为大家详细介绍了vue数据双向绑定的注意点,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue登录功能实现全套详解(含封装axios)

    Vue登录功能实现全套详解(含封装axios)

    登录功能对于前端刚入门不久的同学来说较为困难,下面这篇文章主要给大家介绍了关于Vue登录功能实现(含封装axios)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue 项目接口管理的实现

    vue 项目接口管理的实现

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,本文就来介绍一下vue 项目接口管理,具有一定的参考价值,感兴趣的小伙伴可以一起来了解一下
    2019-01-01
  • Vue3生命周期钩子函数详解

    Vue3生命周期钩子函数详解

    这篇文章主要为大家详细介绍了Vue3生命周期钩子函数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证),一起看看吧
    2018-03-03
  • vue 根据数组中某一项的值进行排序的方法

    vue 根据数组中某一项的值进行排序的方法

    这篇文章主要介绍了vue 根据数组中某一项的值进行排序的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue 根据条件判断van-tab的显示方式

    Vue 根据条件判断van-tab的显示方式

    这篇文章主要介绍了Vue 根据条件判断van-tab的显示方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue如何在store仓库中使用路由

    vue如何在store仓库中使用路由

    这篇文章主要介绍了vue如何在store仓库中使用路由,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue.js实例方法之生命周期详解

    Vue.js实例方法之生命周期详解

    这篇文章主要给大家介绍了关于Vue.js实例方法之生命周期的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07

最新评论