vite.config.ts配置代理跨域
时间: 2025-01-08 16:47:04 浏览: 167
### 配置 Vite 代理服务器
为了处理跨域请求,Vite 提供了一个内置的代理机制。通过在 `vite.config.ts` 文件中配置代理选项,可以有效地解决开发环境中的跨域问题。
#### 使用 server.proxy 属性配置代理
在项目的根目录下找到或创建 `vite.config.ts` 文件,并按照如下方式配置:
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080', // 后端服务地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
})
```
此配置表示当访问 `/api` 开头的路径时,会将其转发到指定的目标 URL 上[^1]。
#### 解决 localhost 无法作为目标主机的问题
有时使用 `localhost` 可能会导致代理失败的情况发生。遇到这种情况建议改用 IP 地址形式 (`127.0.0.1`) 来代替域名 `localhost` 进行配置[^3]。
#### 自动重载与热更新支持
值得注意的是,在正确设置了上述代理之后,所有的 API 请求都将被透明地转发给实际的服务端接口,而不会受到浏览器同源策略的影响。与此同时,Vite 的自动重载和模块热替换(HMR) 功能仍然能够正常工作[^2]。
阅读全文
相关推荐

















