📘 前端项目中跨域问题及解决方式详解（Vite 项目）

一、🌐 什么是跨域？

跨域（Cross-Origin） 指的是在浏览器中，前端页面与服务器之间的协议、域名或端口不一致而引发的安全限制。

✅ 浏览器的同源策略（Same-Origin Policy）

浏览器只允许前端访问同源资源：

协议相同（http/https）
域名相同（localhost/example.com）
端口相同（:3000 / :5173）

二、⚠️ 跨域的典型场景

本地开发环境（Vite）：

页面地址：http://localhost:5173
接口地址：https://api.xxx.com

你请求：

fetch('https://api.xxx.com/user/list')

会被浏览器拦截，提示：跨域访问被阻止（CORS error）

三、🚀 如何在 Vite 项目中解决跨域？

✅ 方法：使用 Vite 的代理功能 `server.proxy`

让本地开发服务器（Vite 内部基于 Node.js 的 server）做代理请求，从而避开浏览器的跨域检查。

🔧 配置方式如下：

// vite.config.js / vite.config.ts
export default defineConfig({server: {proxy: {'/api': {target: 'https://api.xxx.com', // 实际接口地址changeOrigin: true,            // 更改请求头中的 originrewrite: path => path.replace(/^\/api/, '') // 重写路径}}}
})

四、🔄 请求转发流程图解

你写的代码：
fetch('/api/user/list')↓ 实际发起请求http://localhost:5173/api/user/list（本地，不跨域）↓ 被 Vite dev server 拦截转发请求到：
https://api.xxx.com/user/list↓ 后端正常响应Vite 收到响应后返回给前端

✅ 浏览器认为请求仍是同源（localhost:5173），所以不会拦截。

五、📌 proxy 配置参数详解

配置项	说明
`target`	要代理转发的目标地址
`changeOrigin`	是否更改请求头中的 origin 字段（大多数后端要求为 true）
`rewrite`	重写路径（如把 `/api/user` 转为 `/user`）

六、📦 项目部署后是否还需要代理？

不需要！

生产环境打包后，页面与接口通常部署在同一个主域名或使用 nginx 做反向代理，此时不会跨域。

但如果接口仍然来自其他域名：

✅ 后端需配置 CORS 响应头
或使用 nginx / 网关代理解决

在项目中，本地开发阶段我通过配置 Vite 的 server.proxy 将 /api 请求代理到真实后端接口，解决浏览器的跨域限制问题。这样前端请求看似是本地同源，其实由 Vite 的开发服务器中转并转发到目标后端，避免了 CORS 错误。
上线后通常不需要 proxy，接口一般会部署到同域名，或由网关统一做转发。

🧩 一、Webpack 中如何解决跨域？

Webpack 本身不具备跨域代理功能，但它内置的开发服务器 —— webpack-dev-server 提供了代理（proxy）功能，可以实现与 Vite 类似的跨域解决方案。

✅ 常用方式：配置 `devServer.proxy`

示例：webpack.config.js

module.exports = {// ... 其他配置devServer: {proxy: {'/api': {target: 'https://api.xxx.com',   // 实际后端地址changeOrigin: true,              // 修改 origin 头，防止被后端拒绝pathRewrite: { '^/api': '' },    // 可选：去除路径中的 /api}}}
}

🔁 工作原理：

跟 Vite 类似：

前端请求：     http://localhost:8080/api/user/list
webpack dev server 拦截并转发给：https://api.xxx.com/user/list

🆚 二、Vite vs Webpack 的跨域代理配置区别

项目	Webpack (`webpack-dev-server`)	Vite (`vite.config.js`)
配置位置	`devServer.proxy`	`server.proxy`
是否原生支持	需要依赖 webpack-dev-server	原生支持
路径重写	`pathRewrite: { '^/api': '' }`	`rewrite: path => path.replace(/^\/api/, '')`
修改 Origin	`changeOrigin: true`	`changeOrigin: true`
支持 WebSocket	需要配置 `ws: true`	默认支持
是否用 ES Module	基于 CommonJS 配置	基于 ESM 配置（支持 TypeScript）
适配调试体验	相对稍复杂，热更新速度慢	快速热更新，默认支持现代浏览器特性

🧠 面试回答建议

在使用 Webpack 进行本地开发时，我们通过配置 devServer.proxy 来实现接口代理，将以 /api 开头的请求代理到后端真实地址，以解决开发过程中的跨域问题。这个机制与 Vite 的 server.proxy 类似，都是由本地开发服务器中转，避免浏览器 CORS 限制。
不同点在于，Vite 使用的是原生 ES 模块和现代浏览器特性，配置更加简洁，启动和热更新更快；Webpack 配置稍复杂但生态成熟，适用于老项目或对构建控制要求较高的场景。