vue实现反向代理
在Vue中实现反向代理
使用Vue CLI创建的项目可以通过配置vue.config.js文件实现反向代理，主要用于解决开发环境下的跨域问题。以下是具体实现方法：
配置vue.config.js
在项目根目录下创建或修改vue.config.js文件，添加devServer.proxy配置项：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://target-server.com', // 目标服务器地址
changeOrigin: true,
pathRewrite: {
'^/api': '' // 重写路径，去掉/api前缀
}
}
}
}
}多路径代理配置
如需代理多个路径，可以添加多个配置项：
proxy: {
'/api1': {
target: 'http://server1.com',
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {
target: 'http://server2.com',
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}实际请求示例
在代码中发起请求时，使用配置的代理前缀：
axios.get('/api/users') // 实际请求会被代理到http://target-server.com/users生产环境配置
开发环境配置仅适用于npm run serve。生产环境需要：
- 使用Nginx等服务器配置反向代理
- 或直接调用后端API地址（需解决跨域）
Nginx反向代理配置示例
server {
listen 80;
server_name your-domain.com;
location /api/ {
proxy_pass http://backend-server.com/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}注意事项
- 修改配置后需重启开发服务器
changeOrigin设为true可修改请求头中的host值- 路径重写(
pathRewrite)可根据实际需求调整 - 生产环境部署时，代理配置应在Web服务器完成，而非前端代码
