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

2024-09-30 16:16:56

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

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 设置请求头问题

在axios向后端传参时需要设置请求头,确保请求参数的格式为JSON字符串(此时用JSON.stringify(obj)无效时) this.$axios({ method:'', url:'', headers: { 'Content-Type': 'application/json',//设置请求头请求格式为JSON 'access_token': this.token //设置token 其中K名要和后端协调好 }, params:{} }).then((response)=>{}) 下面看
vue-resouce设置请求头的三种方法

本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showList: true, title: null }, http: { root: '/', headers: { token: token } } }) 第二种:全局设置请求头 Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第三种:在拦截器
vue在响应头response中获取自定义headers操作

日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作. 系统为了安全会去掉自定义头,如果不做任何处理,前端无法通过javascript访问自定义头,所以需要在接口返回中添加这样的操作. response['Cookie'] ='13231231231' #自定义头添加后接口返回信息如以下截图: 控制台打印headers信息如以下截图: 要正确打印需要在接口返回中设置
使用axios请求接口,几种content-type的区别详解

axios的使用安装(一般使用框架的话, 脚手架都集成了) $ npm install axios 请求示例 // POST axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // GET axios.ge
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?&qu
Vue 设置axios请求格式为form-data的操作步骤

Cover 在Vue中使用axios 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目下执行npm install axios. 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封装了get方法,传入请求
解决vue项目axios每次请求session不一致的问题

1.vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' imp
vue 导出文件,携带请求头token操作

前言本文并不能直接复制到本地看效果,仅提供代码参考 1.使用axios的方式携带请求头token 2.设置响应的数据类型 responseType: "blob" 3.请求成功,返回二进制文件的数据回来 4.请求失败,返回json 5.示例代码 <template> <div> <el-button type="primary" size="small" :loading="btnLoading"
详解vue中axios请求的封装

axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理安装 npm i axios 封装我把axios请求封装在http.js中,重新把get请求,post请求封装了一次首先,引入axios import axios from 'axios' 设置接口请求前缀一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用
Vue封装Axios请求和拦截器的步骤

PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project axios 是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库. axios很好用,其中之一就是它的拦截器十分强大,我们可以为请求和响应设置拦截器,比如请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便,响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态.授权. 之前初学的时候,经常
如何用vue封装axios请求

其实vue封装axios是很简单的首先在src路径下建http文件夹并且创建api.js env.js request.js 这三个文件 env.js文件这个文件主要就是封装我们的公共地址 export default { // 开发环境 dev: { baseUrl: "开发环境公共地址" }, // 测试环境test test: { baseUrl: "测试环境公共地址" }, //线上接口 prod: { baseUrl: "线上环境公共地址
Vue使用axios引起的后台session不同操作

新项目前端用的Vue全家桶,使用axios代替ajax请求后台接口,在调整注册接口的时候,发现在session里取不到验证码,排查后才知道获取验证码和注册两个请求的session不同,sessionId不一样. 现在调整一下Vue的配置,修改main.js文件,添加如下两行代码 import axios from 'axios' axios.defaults.withCredentials=true; 修改后 import Vue from 'vue' import App from './Ap
vue 项目引入echarts 添加点击事件操作

main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on('click',function (param) { console.log(param) }) _this.cale
vue项目中js-cookie的使用存储token操作

1.安装js-cookie # npm install js-cookie --save # yarn add js-cookie 2.引用(需要的文件) import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(tcuncuoken) { return Coo

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

相关推荐

随机推荐