vue.config.js中配置多个跨域代理

找到项目根目录下的vue.config.js 没有就建一个

然后在module.exports下的devServer中这样写

proxy: {
    
    
 "/api": {
    
    
      target: 'http://localhost:8080/',
      ws: true,
      changeOrigin: true,
      pathRewrite: {
    
    
          ['^' + process.env.VUE_APP_BASE_API]: ''
      }
  },
  "/api1": {
    
    
      target: 'http://localhost:8081/',
      ws: true,
      changeOrigin: true,
      pathRewrite: {
    
    
          ['^' + process.env.VUE_APP_BASE_API]: ''
      }
  }
}

这样 当请求地址带api前缀 则转让http://localhost:8080/代理
api1则转让 http://localhost:8081/
举个例子

devServer: {
    
    
  proxy: {
    
    
    "/user": {
    
    
        target: 'http://localhost:8081/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
    
    
            ['^' + process.env.VUE_APP_BASE_API]: ''
        }
    },
  }
}

这样 我在组件中请求/user/
在这里插入图片描述
他就帮我代理成了 http://localhost:8081/user/
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45966674/article/details/129983227