JavaScript 中 Vite 怎么配置反向代理解决跨域-js教程-PHP中文网

vite的proxy仅用于开发环境绕过跨域，通过vite dev服务器将/api等请求转发至后端；生产环境需用nginx反向代理或后端配置cors，因build后静态文件无代理能力。

javascript 中 vite 怎么配置反向代理解决跨域

在 Vite 项目中，配置反向代理主要是为了开发阶段绕过浏览器同源策略，把前端请求转发到后端服务，从而解决跨域问题。注意：这是开发服务器（vite dev）的功能，**不适用于生产环境**；生产环境应由 Nginx、CDN 或其他服务器统一处理代理或 CORS。

1. 在 `vite.config.ts` 中配置 `server.proxy`

Vite 使用 connect 的代理中间件（底层基于 http-proxy-middleware），支持灵活的路径匹配和重写规则。基本写法如下：

以代理 /api 开头的请求到 https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4 为例：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
<p>export default defineConfig({
plugins: [react()],
server: {
port: 5173,
proxy: {
'/api': {
target: '<a href="https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4">https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4</a>',
changeOrigin: true, // 修改请求头中的 origin，避免后端校验失败
secure: false,      // 如果目标是 https 且证书无效，设为 false（开发时常见）
rewrite: (path) => path.replace(/^\/api/, '') // 可选：去掉路径前缀再转发
}
}
}
})
</p>

说明：

target：后端服务地址（必须带协议，如 http:// 或 https://）
changeOrigin：设为 true 后，Vite 会把请求头中的 Host 改为目标地址，避免后端因 Host 不匹配拒绝请求
rewrite：用于移除代理前缀（比如前端请求 /api/users，希望后端收到的是 /users）

2. 多个代理规则与通配符支持

可以同时配置多个路径规则，也支持正则匹配（需用对象形式）：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

proxy: {
  '/api': {
    target: 'https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  },
  '/auth': {
    target: 'http://localhost:8080',
    changeOrigin: true
  },
  // 匹配 /static/** 并转发到另一个服务
  '^/static/.*': {
    target: 'http://cdn.example.com',
    changeOrigin: true,
    secure: false
  }
}

注意：正则写法需用字符串键（如 '^/static/.*'），Vite 会自动识别为正则规则。

3. 常见问题与调试建议

如果代理不生效，可检查以下几点：

确认请求 URL 确实匹配代理路径（区分大小写、是否带前缀）
确保后端服务已启动，且能被 Vite 进程直接访问（例如 Docker 容器网络互通）
查看终端中 Vite 启动日志，有类似 [vite] Proxying to https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4 的提示表示配置已加载
打开浏览器开发者工具 → Network 面板，看请求的 Preview/Response 是否返回了后端数据；若返回 404 或连接拒绝，大概率是 target 地址错误或后端未响应
如果后端依赖 Cookie 或认证头，确保 changeOrigin: true 已开启，并检查是否需要额外设置 cookieDomainRewrite（较少用，通常默认即可）