原理是通过将远程api地址代理到本地同源的地址,达到欺骗浏览器的目的
例如前端是 http://localhost:8080,远程api是 http://123.1.1.1:9090
通过代理后,浏览器访问的api也成了http://localhost:8080,再通过代理访问http://123.1.1.1:9090
浏览器 -> http://localhost:8080 -> dev代理(npm run dev) -> http://123.1.1.1:9090
不用去设置后端或服务器
在 config 目录下的 index.js ,是长这个样子的
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {}
},
// ...
}
将 proxyTable: {} 改为:
proxyTable: {
'/apis': { //将http://123.1.1.1:9090印射为/apis
target: 'http://123.1.1.1:9090', // 接口域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
},
重新 npm run dev
这样修改后,就只需用 apis/v1/users 代替之前的 http://123.1.1.1:9090/v1/users 了