封装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); });

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