vue cli中proxyTable配置无效的解决方法
更新时间：2023-10-30
## 什么是vue cli中的proxyTable
在使用vue cli构建项目时，我们可以在config/index.js中找到proxyTable。它是一个代理表，可以将请求代理到另一个处于不同的域和端口的服务上。使用proxyTable可以方便地解决跨域问题。
## 如何配置proxyTable
proxyTable是一个键值对对象，键是需要代理的前缀，值是代理的目标地址。
以请求‘/api/getData’为例，在index.js中可以这样配置proxyTable：
```javascript
module.exports = {
dev: {
proxyTable: {
'/api/getData': {
target: 'http://localhost:3000',//目标地址
changeOrigin: true,//允许跨域
pathRewrite: {
'^/api/getData': '/getData'//代理地址重写
}
}
}
}
}
```
- target：目标地址，指向需要代理的服务器地址（注意端口号）
- changeOrigin：允许跨域
- pathRewrite：代理地址重写
## 为什么proxyTable会失效
在开发vue项目时，有时候我们会发现在开发模式下配置的proxyTable并没有像预期的那样生效，这可能有以下几种原因：
### 原因1：地址拼接问题
如果在发送请求时使用的是相对路径，在地址拼接时就不能直接加上代理的前缀。正确的做法是在发送请求时，使用绝对路径，并且将本地开发地址替换为代理地址。
比如：我们将本地开发地址定义为localhost:8080，代理地址为localhost:3000，在axios请求数据时，我们使用的是相对路径‘/data’，这个请求会被发送到localhost:8080/data，而不是代理地址localhost:3000/data。正确的做法是使用绝对路径。
```javascript
axios.get('/api/getData').then((res)=>{
console.log(res.data);
});
```
### 原因2：匹配规则问题
proxyTable是一个键值对对象，其中键是需要代理的前缀，需要保证匹配规则正确。需要特别注意的是在引入代理规则时的顺序问题，在config/index.js中，将proxyTable配置放在其他配置之前。
```javascript
module.exports = {
dev: {
proxyTable: {
'/api/getData': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api/getData': '/getData'
}
}
},
//其他配置
}
}
```
### 原因3：重启问题
在修改proxyTable配置后，一定要重启开发服务器，否则配置不生效。
## 如何解决proxyTable失效的问题
了解了proxyTable失效的原因，我们就可以想到相应的解决方案：
1.使用绝对路径发送请求，将本地开发地址替换为代理地址
```javascript
axios.get('/api/getData').then((res)=>{
console.log(res.data);
});
```
2.检查匹配规则是否正确，在引入代理规则时将proxyTable配置放在其他配置之前。
```javascript
module.exports = {
dev: {
proxyTable: {
'/api/getData': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api/getData': '/getData'
}
}
},
//其他配置
}
}
```
3.重启开发服务器
## 总结
在vue cli中使用proxyTable配置代理时，需要注意地址拼接、匹配规则和重启等问题。只要注意这些要点，就可以很好地避免失效问题，顺畅地开发vue应用。
