vue
1.在vue.config.js
中添加 devServer
属性中配置 proxy
属性
module.exports = {
productionSourceMap: false,
publicPath: '/',
devServer: {
port: 8085,
proxy: {
'/api/admin': {
target: 'http://10.58.104.70:6111',
changeOrigin: true,
pathRewrite: {
'/api/': '/'
}
},
'/api': {
target: 'http://10.58.104.70:6111',
changeOrigin: true
}
}
}
}
说明:
我们可以看到 proxy
的格式是 key-value
的形式,key 即 上边的 api
,这是要拦截的路径,value即是匹配的规则。
匹配规则
从域名之后第一个路径地址开始匹配,然后从上到下,从前往后,直到匹配到第一个符合的路径后停止
key的规则
例如:请求地址是http://www.xxx.com/api/admin
- 上边代理会从上到下先匹配
/api/admin
路径,我们的地址域名后正好有/api/admin
那么这次的规则匹配结束,不在往下匹配。那么他会把我们的请求代理到 http://10.58.104.70:6111/api/admin 这个地址上去。 - 如果我们要匹配的路径是
/api/login
,那么按照规则,只会匹配到下边的/api
上。
注意
多路径匹配必须要写在单路径匹配之上。如果多路径写在单路径的下边,那么会被单路径拦截,导致代理失败。
例如:如果上边的/api/admin
写在/api
下边的话,那么在匹配/api/admin
时会直接匹配到/api
而停止,不会在往下找。
value的参数含义
target
: 是目标服务器,即你要往哪里代理;例如:你的服务在A,要往B服务做代理,那么这里的地址就是B服务的地址。
pathRewrite
: 重写路径,请求地址中的指定路径;比如:你在A服务的地址是 http://xxxx/api/admin/index
,代理B服务的地址是: http://xxx/admin-api/admin/index
,这时候我们 就可以使用 pathRewrite
把A地址的 api
替换为 admin-api
,来实现B服务的地址拼接;当然,如果服务地址是一样的,那也可以不用写 pathRewrite
属性;
changeOrigin
: 是否允许跨域请求,默认为true即可;
uniapp
具体规则和vue中的一样。配置方式如图:
多了个参数:
secure
: 是否开启 https