iview admin 本地开发环境配置代理服务解决跨域问题

作者: wxfeng 分类: web前端 发布时间: 2018-11-21 00:00

最近公司有个前端项目用到了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错误,具体原因还没有查找,欢迎评论指正。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注