Vue工程中使用Axios的本地跨域问题

问题

使用Vue的webpack-simple模板生成了一个工程,使用过程中,axios在访问API时,报错跨域问题。

解决

Google之,了解了一下跨域的原理,查看了一下network面板,发现数据已经拿回来,所以妥妥的跨域问题。

有文章提出最简单的解决方法就是本地代理,查看标准webpack模板,发现dev脚本其并不是webpack-dev-server,继续查看webpack-dev-server的文档,发现其devServer配置可以有代理,做以下改动即可:

//根目录下的 webpack.config.js
module.exports = {
//......
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
//*** 添加proxy ***
proxy: {
'/api': {
target: 'http://IP地址:端口/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
}
//......
}
//.......
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
API_HOST: '"http://IP地址:端口/"' //添加API_HOST
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
} else if (process.env.NODE_ENV === 'development') {
// 添加dev时环境变量
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
API_HOST: '"/api/"'
}
})
])
}

这样在使用API时,

let BASE_URL = process.env.API_HOST

即可。