打开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后前端汉子,爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。