封装axios请求，并解决跨域问题

跨域问题在前后端分离中是很常见的问题，大多数跨域问题前端都可以把锅甩给后端，但后端已经设置允许跨域了，你还是报跨域错误的话，那就好好反思下吧。

封装axios
新建个request.js

/**axios封装

• 请求拦截、相应拦截、错误统一处理
  */
  import axios from ‘axios’;

axios.defaults.timeout = 5000;//延时处理

// api地址公共部分
const baseURL = ‘http://apitest.com’

//http request 拦截器
axios.interceptors.request.use(
config => {
config.headers = {
‘Content-Type’: ‘application/x-www-form-urlencoded;charset=UTF-8’
}
return config;
},
error => {

    return Promise.reject(err);
}

);

//http response 拦截器
axios.interceptors.response.use(
response => {
if (response.data.errCode == 2) {
router.push({
path: “/”,
querry: { redirect: router.currentRoute.fullPath } //从哪个页面跳转
})
}
return response;
},
error => {
console.log(error)
return Promise.reject(error)
}
)

/**

• get方法，对应get请求
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
  /
  export function get(url, params) {
  return new Promise((resolve, reject) => {
  axios.get(baseURL + url, {
  params: params
  })
  .then(res => {
  resolve(res);
  })
  .catch(err => {
  reject(err)
  })
  });
  }
  /*
• post方法，对应post请求
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
  */

// 对所有 axios 请求做处理
//getData可以用qs来代替
var getData = function(data) {
try {
var tempArr = []
for (var i in data) {
var key = encodeURIComponent(i)
var value = encodeURIComponent(data[i])
tempArr.push(key + ‘=’ + value)
}
var urlParamsStr = tempArr.join(’&’)
return urlParamsStr
} catch (err) {
return ‘’
}
}

export function post(url, params) {
//不携带cookie
axios.defaults.withCredentials = false
return new Promise((resolve, reject) => {
axios.post(baseURL + url, getData(params)).then(function(res) {
resolve(res);
}).catch(function(error) {
reject(error)
})
});
}

后面就在main.js引入

import request from './util/request ';
Vue.prototype.$request =request; //设置为原型

页面直接引用：
var data={
token:‘12434’
}
that.$request.post(data) .then(res => {
console.log(res);
}).catch(error => {
console.log(error);
});

完整的流程就是这样，留记！