Fetch代理模式解决跨域问题详解

本文深入解析了如何利用开发服务器的代理模式（如 Vite 的 `server.proxy`）巧妙绕过浏览器同源策略限制，彻底解决本地开发时 `fetch` 请求跨域被拦截的痛点——其核心在于将前端看似“跨域”的请求转为服务端到服务端的同源中转，既无需后端配置 CORS，又避免了生产环境误用代理的风险；文中不仅清晰阐明原理、手把手演示 Vite 代理配置要点（路径匹配、`target`、`changeOrigin`、`rewrite`），还强调了 `fetch` 必须使用相对路径的关键实践，并贴心梳理了常见报错原因与调试技巧，助你高效、稳健地打通前后端联调链路。

直接用 fetch 请求不同源的后端接口，在本地开发时会触发浏览器同源策略拦截。代理模式不是让 fetch 自己“绕过”跨域，而是把请求先发给开发服务器（如 Vite 或 Webpack Dev Server），由它转发到真实后端——此时是服务端对服务端通信，天然不受跨域限制。

为什么代理能绕过跨域

浏览器只对 前端脚本发起的请求 做同源检查，而代理是开发服务器在中间“中转”。比如你本地跑在 http://localhost:5173，后端在 http://localhost:8081，fetch 实际请求的是 /api/users，这个路径被 Vite 拦截，再以服务端身份去调 http://localhost:8081/api/users，响应原样返回给前端。整个过程浏览器只看到同源请求。

Vite 中配置代理的核心步骤

在 vite.config.ts 的 server.proxy 里添加规则：

• 匹配路径前缀，例如 '/api'，所有以该前缀开头的 fetch 请求都会被代理
• 设置 target 指向真实后端地址，如 'http://localhost:8081'
• 必须开启 changeOrigin: true，否则后端收到的 Origin 头仍是 localhost:5173，可能校验失败
• 如需去掉前缀再转发（比如前端请求 /api/users，后端实际要 /users），加 rewrite: (path) => path.replace(/^\/api/, '')

fetch 请求时的关键写法

代理生效的前提是 fetch 不写完整 URL，只写相对路径或带代理前缀的路径：

• ✅ 正确：fetch('/api/users') 或 fetch('/api/login') —— 被 Vite 拦截并转发
• ❌ 错误：fetch('http://localhost:8081/api/users') —— 浏览器直连，必然跨域
• 建议配合环境变量统一管理前缀，比如 fetch(`${import.meta.env.VITE_API_BASE}/users`)，开发时设为 '/api'，生产时设为真实域名

常见问题与应对

代理配好仍报错？重点排查这几项：

• 确认 Vite 服务已重启，代理配置不会热更新
• 检查控制台 Network 面板：请求是否显示为 200 且发起地址是 localhost:5173（说明走代理）；若显示 net::ERR_CONNECTION_REFUSED，说明 target 地址不可达
• 后端是否拒绝了带 Origin 头的请求？代理虽转发，但默认会带上原始 Origin，可加 headers: { Origin: 'http://localhost:8081' } 覆盖（慎用，仅调试）
• 涉及 Cookie 或认证头时，fetch 需加 credentials: 'include'，同时后端 Access-Control-Allow-Credentials 必须为 true，且 Access-Control-Allow-Origin 不能为 *

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Fetch代理模式解决跨域问题详解》文章吧，也可关注golang学习网公众号了解相关技术文章。