vue proxy代理 参数说明
时间: 2025-01-10 07:37:58 浏览: 51
### Vue.js `devServer.proxy` 参数详解
#### 基本概念
当前端应用和后端API服务器不在同一台机器上运行时,在开发环境中可以利用 `vue.config.js` 文件中的 `devServer.proxy` 选项来进行请求转发,从而解决跨域问题[^3]。
#### 主要参数说明
- **target**: 指定目标服务器地址。这是必填项,表示实际提供服务的URL。
- **changeOrigin**: 设置为true时会改变请求头部host字段为目标服务器域名,默认false。这有助于某些情况下使远程服务器认为请求来自其自身而非本地开发环境[^2].
- **pathRewrite**: 路径重写规则对象,键是一个正则表达式字符串或函数形式匹配原始路径的一部分;值则是用来替换这部分内容的新字符串。此功能可用于去除代理前缀如 `/api` 或者更复杂的映射关系[^1]^.
- **secure**: 对于HTTPS协议的目标站点而言,如果设置成true,则只会在SSL证书有效的情况下建立连接,默认是true。对于自签名证书的情况通常设为false以便调试[^4].
- **ws**: 是否启用WebSocket支持,默认false。开启之后能够通过WebSockets实现双向通信.
- **bypass**: 函数类型,允许绕过代理逻辑并返回一个新的响应体给客户端。适用于特定条件下不想走代理流程的情形.
#### 实际案例展示
下面给出一段完整的配置实例:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://example.com',
changeOrigin: true,
pathRewrite: {'^/api' : ''},
secure: false,
ws: true
}
}
}
};
```
这段代码实现了对所有以 `/api` 开头的请求都指向 http://example.com ,并且移除了 URL 中原有的 `/api` 前缀部分.
阅读全文
相关推荐


















