vue项目中解决跨域问题（打包上线无需手动切换url）

1、在目录config下的index.js中设置代理；

proxyTable: { //设置代理

'/api': { //使用"/api"来代替跨域地址139.xxx.xx

target: 'http://139.xxx.xx', //源地址

changeOrigin: true, //改变源

pathRewrite: { //路径重写

'^/api': 'http://139.xxx.xx'

}

}

},

2、分别配置开发环境和生产环境地址

在config目录下dev.env.js中配置开发路径：

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

API_HOST: '"/api"' // 配置代理路径的符号，增加的内容

})

在config目录下prod.env.js中配置开发路径：

module.exports = {

NODE_ENV: '"production"',

API_HOST: '"http://139.xxx.xx"' // 生产环境地址，增加的内容

}

 

3、在组建中进行使用，这里使用vue-resource;

//process.env.API_HOST 获取当前环境的api地址

methods:{

getData: function(){

this.$http.get(process.env.API_HOST + '/AiaaScadaSys/MonitorDB/info').then((response)=>{

this.$data.data_jianhuyi = response.body[0];

console.log(this.data_jianhuyi);

}, (response)=>{

return response.json();

});

},

}

 

总结：经过这样的配置后可以比较完美的解决跨域的问题而不用担心在打包上线的时候还要手动修改api地址，而且维护成本也低。