VUE跨域配置以及头部携带token

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