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

news2024/11/23 23:46:46

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