vue-cli3.0跨域配置

新建vue.config.js文件(此文件跟src文件夹同级)

然后加入以下代码

module.exports = {
    devServer: {

        proxy: {
            /*
                此处的斜杠可以改成任何前缀
            */
            '^/': {
                target: '需要代理的接口地址',
                changeOrigin: true,
                pathRewrite: {
                /*
                    此处的^/要跟上面的对应,这一步是要重写url的地址
                */
                  '^/': '/'
                }
            },

        }, // string | Object
        before: app => {}
    },
}

然后在main.js中修改配置

/*
    这一步是区分开发环境跟生产环境,如果是线上环境就用域名,本地环境就默认斜杠
*/
axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '/' : '线上接口地址的域名';

当然,在某些情况下你或许需要配置多个代理

如果是多个代理

module.exports = {
    devServer: {

        proxy: {
            /*
                此处的斜杠可以改成任何前缀
            */
            '^/aaa': {
                target: '需要代理的接口地址',
                changeOrigin: true,
                pathRewrite: {
                /*
                    此处的^/要跟上面的对应,这一步是要重写url的地址
                */
                  '^/aaa': '/'
                }
            },
            '^/bbb': {
                target: '需要代理的接口地址',
                changeOrigin: true,
                pathRewrite: {
                /*
                    此处的^/要跟上面的对应,这一步是要重写url的地址
                */
                  '^/bbb': '/'
                }
            },
        }, // string | Object
        before: app => {}
    },
}

这么写即可

你可能感兴趣的:(vue-cli3.0跨域配置)