VUE跨域配置以及头部携带token
VUE跨域配置以及头部携带token第一步跨域配置config文件夹下的index.js添加如下代码proxyTable: {'/back-stsem-php-api': {// '/back-stsem-php-api' 可以自己修改// 测试环境target: 'http://admin.dashglobal.io/',/...
·
VUE跨域配置以及头部携带token
第一步 跨域配置
config文件夹下的index.js添加如下代码
proxyTable: {
'/back-stsem-php-api': { // '/back-stsem-php-api' 可以自己修改
// 测试环境
target: 'http://admin.dashglobal.io/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/back-stsem-php-api': '' //需要rewrite重写的,
},
sesure:false
}
},
src文件夹下创建api文件夹存放axios配置文件
http.js 配置如下
import axios from 'axios' //引用axios
import qs from 'querystring'
axios.defaults.timeout = 12000
export default {
httpGet (url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {params: params}).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
httpPost (url, params) {
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(params)).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
//formdata上传图片
httpFormData (url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}
}
user.js axios 请求写法
import http from './http' //引用
//请求接口
// /back-stsem-php-api是什么在config下index.js文件自定义的配置
export const userCoinList = (params) => {
return http.httpGet('/back-stsem-php-api/api/client/user_coin_list', params)
}
组件中调用
import {userCoinList} from '../api/user' //引用
//请求接口
methods:{
listData(){
userCoinList('').then(function (res) {
console.log(res);
})
},
}
token 配置 main.js 添加请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
//判断是否存在token,如果存在将每个页面header都添加token
// store.state.token token是保存在vuex中
if (store.state.token) {
config.headers.common['Authorization'] = 'Bearer ' + store.state.token
}
return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error)
})
// http response 拦截器
axios.interceptors.response.use(
response => {
response.headers = {
'Content-Type': 'application/x-www-form-urlencoded' // 设置很关键
}
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
//this.$store.commit('del_token')
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error.response.data)
})
更多推荐
已为社区贡献2条内容
所有评论(0)