vue中axios设置表单头_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中axios设置表单头_VUE项目axios请求头更改Content-Type操作相关推荐
- Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为 在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- Vue中登录验证成功后保存token,并每次请求携带并验证token操作
在vue中,可以用sessionStorage或localStorage来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage),下面介绍用localS ...
- vue 给form表单赋值_vue获取form表单的值示例
vue获取form表单的值示例 这里使用的是Element-ui组件 html: JS: var phone = this.phone; var password = this.password; v ...
- vue密码正则验证表单验证_如何在Vue中使用表单验证
vue密码正则验证表单验证 介绍 (Introduction) Almost every web application makes use of forms in some way, as such ...
- 使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
- element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com ...
- HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype=application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
- BPM实例分享:如何设置表单字体样式
系统版本:V10.0 一些业务场景中,时尔需要改变表单字体 那如何设置表单字体样式? 本文将会针对全局表单和单个表单进行阐述! 1.全局表单: 修改WFRES\CSS\MvcSheet.css , ...
最新文章
- 计算机组成原理考试计算题,计算机组成原理常考计算题.doc
- 软件工程学完java后干_软件工程学习后的一些体会--------两周
- Cloud for Customer的主页加载逻辑
- C语言代码注释 - C语言零基础入门教程
- 上海浦东新区公共租赁住房申请攻略
- animation动画效果 1002 css3
- 缠中说禅_缠中说禅严格笔画法
- 编程面试问题越难越好?!
- extremecomponents
- cfree mysql_如何配置CFree才能开发MySql数据库应用
- Android实现随意拖动View效果
- 服务器的垃圾清扫系统指令,怎么用dos命令系统清理垃圾
- 西安音乐学院人计算机学院,我校在“中国大学生计算机设计大赛”中获佳绩
- 计算机管理 合并分区,硬盘分区进行合并 硬盘分区后怎么合并
- 中国移动“梧桐杯”大数据应用创新大赛强势来袭三大赛道再续辉煌
- MFC框架 afx_msg CComboBox OnDropdown
- NGUI|如何做出用鼠标滚动切换武器的效果
- Java暑期实训任务二——单词检测程序
- 独立开发变现周刊(第44期):12岁的小男孩在9个小时内NFT卖了40万美元!
- 抓取2021百科知识竞赛题库和答案