vue中二次封装 axios 以及跨域问题

1.在vue脚手架里面src文件下面创建一个api文件夹 里面分别创建index.js 和 request.js 如下图

2.request.js文件

// 请求
import axios from 'axios'

// create an axios instance   创建axios实例
const instance = axios.create({
	baseURL: 'http://192.168.3.6:8082', // api 的 base_url
	withCredentials: false//跨域时使用凭证，默认带上cookies
	timeout: 2000, // request timeout  设置请求超时时间
  })

// 添加请求拦截器
instance.interceptors.request.use(
  config => 
  
    return config;
  },
  error => {
    return Promise.reject(error);
  });

export default instance

3.index.js

import instance from './request'

// get接口
export function SelectableGetData() {
	return instance({
		url:'/field/selectAll',
		method: 'get',
	})
}

// post接口  普通传参
export function LoginPostData(email,password) {
	return instance({
		url:'/login',
		method: 'post',
		data:{
			email,
            password
		}
	})
}

// 当后端是query的时候前端就要使用params进行传参
export function DelTablePostData(id) {
	return instance({
		url:'/delTable',
		method: 'post',
		params:{
			id
		}
	})
}

解决跨域问题 我选择的是第三方代理服务器

创建一个vue.config.js如下图

module.exports = {
    // 关闭eslint
    // lintOnSave:false,
    // 代理跨域
    devServer: {
        proxy: { //配置跨域
         '/api': {
          target: 'http://192.168.3.6:8082', //这里后台的地址模拟的;应该填写你们真实的后台接口
          changOrigin: true, //允许跨域
          pathRewrite: {
           /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
            实际上访问的地址是：http://192.168.3.6:8082/core/getData/userInfo,因为重写了 /api
            */
           '^/api': '/'
          }
         },
        }
       },
}

注意：vue.config.js里面的target: 'http://192.168.3.6:8082'与request.js文件的baseURL: 'http://192.168.3.6:8082' 两个地址要一样否则还是回报跨域的错误