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错误,具体原因还没有查找,欢迎评论指正。
更多推荐
已为社区贡献1条内容
所有评论(0)