开发环境下Ajax跨域最推荐的解法是配置前端开发服务器代理：Vue CLI通过vue.config.js、Vite通过vite.config.js、CRA通过package.json设置代理，使/api请求转发至后端，前端须调用相对路径如'/api/login'而非绝对URL。
开发环境下，Ajax 跨域问题最常用、最推荐的解法是配置前端开发服务器代理——它不改后端、不碰浏览器策略、不引入第三方插件，只在本地 devServer 层把请求“伪装”成本地同源请求，让后端无感知地响应。
Vue CLI 项目配代理（vue.config.js）
适用于 Vue 2 / Vue 3（非 Vite）脚手架项目。在项目根目录创建或修改 vue.config.js：
- 代理目标为 http://localhost:8080（你的后端地址）
- 所有以 /api 开头的请求，自动转发到该后端
-
changeOrigin: true确保请求头中的Host被重写为目标地址，避免后端校验失败
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
}
Vite 项目配代理（vite.config.js）
Vite 使用 server.proxy 配置，语法更简洁，支持多级路径和 WebSocket 透传：
- 前端请求
/api/users→ 自动转为请求http://127.0.0.1:3000/users -
rewrite替代pathRewrite，函数式写法更灵活 - 若后端需 Cookie 或认证头，务必加
changeOrigin: true和secure: false（HTTPS 代理时）
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
React（Create React App）配代理（package.json）
CRA 不提供细粒度代理配置，但支持最简方式：在 package.json 中加一行 "proxy" 字段：
立即学习“Java免费学习笔记（深入）”；
- 仅支持单个代理目标（不能像 Vue/Vite 那样配多个前缀）
- 必须是完整 URL（含协议和端口），如
"http://localhost:8000" - 所有未匹配静态文件的请求，都会被转发过去
- 注意：此方式不支持路径重写，后端接口需严格匹配前端调用路径
"proxy": "http://localhost:8000"
代理生效后的前端写法（关键！）
配置完代理，前端请求必须发给 开发服务器自身，而不是真实后端地址：
- ✅ 正确：
axios.get('/api/login')或fetch('/api/list') - ❌ 错误：
axios.get('http://localhost:8080/api/login')—— 这仍会跨域，代理不生效 - 代理只作用于 devServer 启动的本地服务（如 http://localhost:3000），生产环境无效，需由 Nginx 或后端统一处理
