VUE反向代理怎么配置？如何防止本地开发时接口调用跨域问题？

在vue开发中，经常会遇到跨域问题。那么比较常见的前端处理方法就是配置反向代理，如何配置呢？

1.前往根目录，创建vue.config.js文件；

 2.编写配置：

const path = require('path');
// const ZipPlugin = require('zip-webpack-plugin');
let zipName = 'dist';
module.exports = {
    transpileDependencies:['@dcloudio/uni-ui'],

    publicPath: './',
    // chainWebpack: config => {
    //     // 打包ZIP
    //     config.plugin('zip').use(ZipPlugin, [{
    //         path: path.join(__dirname, 'dist'),
    //         filename: `${zipName}.zip`
    //     }]);
    // },
    //配置一些目录的精简访问方式
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.join(__dirname, 'src'),
                'assets': path.join(__dirname, 'src/assets'),
                'components': path.join(__dirname, 'src/components')
            }
        },
        devServer: {
            client: {
                overlay: false
            },
            //注意，配置反向代理后，需重新执行yarn serve 运行
            proxy: {
                '/nmediaapi': {     //资讯
                    target: "http://dev.example.cn",
                    changeOrigin: true,
                    ws: true,
                },
                '/activityMallapi': {   //智能数据
                    target: "http://dev.example.cn",
                    changeOrigin: true,
                    ws: true,
                },
                '/footballapi': {    //赛事              
                    target: "http://dev.example.cn",
                    changeOrigin: true,
                    ws: true,
                },
                '/userapi': {        //用户          
                    target: "http://dev.example.cn",
                    changeOrigin: true,
                    ws: true,
                },
                '/nmedia':{         //新媒体      
                    target: "http://dev.example.cn",
                    changeOrigin: true,
                    ws: true,
                },
                '/recommendapi':{    //推荐          
                    target: "http://dev.example.cn",
                    changeOrigin: true,
                    ws: true,
                }
            }
        }
    }
}

3.以上配置完成后，即可编写请求方法，访问接口，例如 

原网址：http://dev.example.cn/activityMallapi/bigDataPursuit/ai/getModelTag

代理到：http://localhost:8080/activityMallapi/bigDataPursuit/ai/getModelTag

 这样就能请求成功，返回200。