iview admin 本地开发环境配置代理服务解决跨域问题
最近公司有个前端项目用到了iview admin,本地开发时,因为接口在另一台机器上,所以在接口请求时,涉及到了跨域访问的问题,因为之前使用VUE2.0+Element,通过配置代理解决了跨域问题,而iview admin也是基于VUE2开发,所以自然的想到了使用同样的方法来解决。但是在使用过程中,与之前有些差异。这里记录下修改的配置,以备后需。修改文件:/build/webpack.de...
·
最近公司有个前端项目用到了iview admin,本地开发时,因为接口在另一台机器上,所以在接口请求时,涉及到了跨域访问的问题,因为之前使用VUE2.0+Element,通过配置代理解决了跨域问题,而iview admin也是基于VUE2开发,所以自然的想到了使用同样的方法来解决。但是在使用过程中,与之前有些差异。
这里记录下修改的配置,以备后需。
修改文件:/build/webpack.dev.config.js
修改位置:在module.exports中添加代理配置devServer
module.exports = merge(webpackBaseConfig, {
devtool: '#source-map',
output: {
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['vender-exten', 'vender-base'],
minChunks: Infinity
}),
new HtmlWebpackPlugin({
title: 'iView admin v' + package.version,
filename: '../index.html',
inject: false
}),
new CopyWebpackPlugin([
{
from: 'src/views/main-components/theme-switch/theme'
},
{
from: 'src/views/my-components/text-editor/tinymce'
}
], {
ignore: [
'text-editor.vue'
]
})
],
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
stats:{color:true},
proxy:{
'/api':{ //接口请求格式:/api/user/login
target:'http://www.api.com',//接口服务器域名
changeOrigin:true,
pathReWrite:{'^/api':'/api'}
}
}
}
});
配置之后,重新执行:npm run dev 即可。
如果遇到404错误,可能是路径配置的问题,期初使用的如下的配置,回报404错误,供各位道友参考
报404错误的代码:
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
stats:{color:true},
proxy:{
'/api':{ //接口请求格式:/api/user/login
target:'http://www.api.com/api/',//接口服务器域名地址
changeOrigin:true,
pathReWrite:{'^/api':'/'}
}
}
}
target 单使用域名没问题,使用域名+/api后便会出现404错误,具体原因还没有查找,欢迎评论指正。
更多推荐



所有评论(0)