vite解决跨域的核心是代理而非cors配置,即通过server.proxy将/api等前缀请求转发至后端,使浏览器仅与本地开发服务器通信,从而绕过同源策略;需在vite.config.ts中配置target、changeorigin:true及rewrite路径,并确保前端请求使用相对路径如'/api/user'。

在 Vite 中解决跨域问题,核心不是“配置 CORS”,而是**绕过浏览器的 CORS 检查机制**——因为 CORS 是浏览器强加的安全限制,前端无法主动“开启”它,只能通过代理或配合后端响应头来应对。实际开发中,Vite 本身不处理 CORS 响应头,它只提供开发服务器代理能力,让请求变成“同源”,从而从源头规避问题。
用 Vite 代理代替 CORS(开发环境首选)
这是最常用、最安全、无需后端介入的方式。原理是:前端请求发给本地 Vite 开发服务器(如 http://localhost:5173/api/user),Vite 收到后自动转发给真实后端(如 http://localhost:8080/user),浏览器全程只和 localhost:5173 通信,自然不触发跨域。
- 在
vite.config.js或vite.config.ts的server.proxy中配置: -
/api是你约定的请求前缀,所有以它开头的请求都会被代理 -
target必须写完整协议+地址+端口(如http://localhost:8080) -
changeOrigin: true必须开启,否则某些后端(尤其 Spring Boot)会因 Origin 头不匹配而拒绝请求 -
rewrite用于去掉前缀,确保转发路径正确(例如/api/login→/login)
前端请求必须走相对路径
代理只对符合前缀的路径生效。如果你在代码里写了完整 URL,代理完全不起作用。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- ✅ 正确:
axios.get('/api/user')或fetch('/api/login') - ❌ 错误:
axios.get('http://localhost:8080/api/user')或fetch('https://api.example.com/user') - 建议统一管理基础路径:用
import.meta.env.VITE_API_BASE_URL,开发时设为/api,生产时设为真实域名
后端需配合的 CORS 配置(仅限需要 Cookie 或正式联调)
如果项目涉及登录态(如携带 cookie)、或要部署到测试环境直接访问后端,就必须由后端设置响应头。此时 Vite 代理不再适用,需后端明确放行前端来源。
-
Access-Control-Allow-Origin不能填*当credentials: true(即带 cookie)时,必须指定具体源,如http://localhost:5173 -
Access-Control-Allow-Credentials: true才能让前端发送 cookie,后端也才能读取 session 或 token -
Access-Control-Allow-Methods和Access-Control-Allow-Headers建议按需开放,避免过度宽松 - Spring Boot 示例:在
CorsRegistry中配置allowedOrigins、allowCredentials(true)、allowedMethods
注意 localhost 和 127.0.0.1 的区别
浏览器把它们视为不同源。如果你前端用 http://127.0.0.1:5173 访问,而后端 CORS 只允许 http://localhost:5173,就会失败。
- 推荐统一用
localhost,并在vite.config.js中显式指定 host:host: 'localhost' - 或者后端 CORS 配置同时放行两个地址:
allowedOrigins("http://localhost:5173", "http://127.0.0.1:5173") - Chrome 的 SameSite 策略会影响 cookie 传递,若发现登录后状态丢失,优先检查是否因 Origin 不匹配导致 cookie 被拦截
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










