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)})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！