【Vue】如何配置代理请求接口

简单粗暴，依旧直接上代码

在实际项目中往往不想直接暴露后台的真实接口，我们可以通过配置代理接口进行伪装请求。

1. 打开项目中/config/index.js文件
   

2. 找到module.exports 配置
   

3. 在dev模块中进行如下配置：
   

// Proxy
    proxyTable: {
      '/web/api': {
        target: 'http://localhost:8081',
        // 设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/web/api': ''
          // 这里理解成用‘/web/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 
          // 比如我要调用'http://localhost:8081/web/user/rest/get'，
          // 直接写‘/web/api/web/user/rest/get’即可
        }
      }
    }
  }

4. 配置完成后重跑项目后就可以在service.js组件中使用代理接口了
   

---

代理的分发

在面试的时候曾被问到，“如何在一个前端项目向不同的后台发送代理请求？”，当时有点懵，现在慢慢补课webpack理解了DevServer于是这些都支持配置。

proxy:{
	'/admin': {
	     target: 'http://localhost:8081/',
	     changeOrigin: true,
	     pathRewrite: {
	         '^/web/api/manager': ''
	     }
	 },
	'/user': {
	     target: 'http://localhost:8082/',
	     changeOrigin: true,
	     pathRewrite: {
	        '^/web/api/living': ''
	     }
	}
}