Vue+webpack+vue-cli+axios跨域设置

Vue+webpack+vue-cli+axios跨域设置

首先找到根目录下的config文件夹下的index.js文件打开找到下面的代码

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    }
    	}

然后把dev下面的proxyTable配置成

proxyTable: {
        '/api': {
            target: 'http://192.168.0.100:8060', //需要跨域的目标地址
            changeOrigin:true,  //开启代理
            pathRewrite: {
            '^/api': '' //以"/api"都使用代理 后面的''如果设置了，如'^/api': '/api' ，那么就连接就成了/api/api
            }
        },

打开下面这个叫dev.env.js的文件

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API:'"http://localhost:8088"' //你自己的地址
})

最后在创建axios实例的时候设置配置

// 创建axios实例
const service = axios.create({
	baseURL: process.env.BASE_API, //这里的地址就是上面设置的自己的地址
	timeout: 5000
})

ok，跨域代理设置完成
然后下面就是小小的test了

export function getProvince() {
	return axios({
		url: '/api/common/area/province/list', //api开头的访问都是用代理的
		method: 'get'
	})
}