当前位置：首页 > news >正文

Vue开发之proxy代理的配置（附带uniapp代理配置）

news 2025/8/26 9:49:21

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即可；