Vue代理

打开config/index.js,在proxyTable中添写如下代码：

vue-cli2.0

proxyTable: {
    '/api': { // "/api" 代理属性的key值，碰到以"/api"开头的请求，就知道要进行代理，可以代理多个，有多个代理属性key
        target: 'https://bygx.zzxkeji.cn', //要代理的服务器地址（按自己需求文档来定）
        secure: true, // 如果是https接口，需要配置这个参数
        // ws: true, //如果要代理 websockets，配置这个参数
        changeOrigin: true, //是否开启开启代理
        pathRewrite: {
            '^/api': '' //重写路径，匹配以/api为开头的路径都变为空字符串 
        },
        // 如果接口路径为https://bygx.zzxkeji.cn/api/news_list 就不需要重写路径，因为接口内部有/api这个key
        // /api/news_list==>https://bygx.zzxkeji.cn/api/news_list
        // 如果接口路径为https://bygx.zzxkeji.cn/news_list  使用代理必须手动增加key值/api前缀才能代理
        // 加入之后成为/api/news_list==>https://bygx.zzxkeji.cn/api/news_list  最后路径多了一个/api，所以需要用pathRewrite重写路径
        // 把'^/api': ''把手动加入的/api去掉结果为https://bygx.zzxkeji.cn/news_list完美
    }
}

vue-cli3.0+ 在vue.config.js中

//只能代理一个地址
proxy: 'https://bygx.zzxkeji.cn', //将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000
//可以代理多个地址
proxy: {
    '/api': { // "/api" 代理属性的key值，碰到以"/api"开头的请求，就知道要进行代理，可以代理多个，有多个代理属性key
        target: 'https://bygx.zzxkeji.cn', //要代理的服务器地址（按自己需求文档来定）
        secure: true, // 如果是https接口，需要配置这个参数
        // ws: true, //如果要代理 websockets，配置这个参数
        changeOrigin: true, //是否开启开启代理
        pathRewrite: {
            '^/api': '' //重写路径，匹配以/api为开头的路径都变为空字符串 
        },
        // 如果接口路径为https://bygx.zzxkeji.cn/api/news_list 就不需要重写路径，因为接口内部有/api这个key
        // /api/news_list==>https://bygx.zzxkeji.cn/api/news_list
        // 如果接口路径为https://bygx.zzxkeji.cn/news_list  使用代理必须手动增加key值/api前缀才能代理
        // 加入之后成为/api/news_list==>https://bygx.zzxkeji.cn/api/news_list  最后路径多了一个/api，所以需要用pathRewrite重写路径
        // 把'^/api': ''把手动加入的/api去掉结果为https://bygx.zzxkeji.cn/news_list完美
    }
}

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。