一、前言
在使用 Vue 进行前后端分离开发时，前端通常运行在本地开发服务器（如 http://localhost:8080），而后端接口可能部署在其他域名或端口下（如 http://api.example.com:3000）。这时就可能出现 跨域（Cross-Origin）请求被浏览器拦截 的问题。
本文将带你深入了解：
- 什么是跨域？为什么会发生？
- Vue CLI 中的代理机制（Proxy）是如何工作的？
- 如何配置
vue.config.js实现开发环境下的跨域代理？ - 使用 Axios 请求时的注意事项
- 生产环境的跨域解决方案建议
- 常见错误及排查方法
二、什么是跨域？为什么会出现？
✅ 同源策略（Same-origin Policy）
浏览器出于安全考虑，默认不允许一个网页向另一个不同源（协议、域名、端口任意一项不同）发起请求。这就是所谓的 同源策略。
例如：
| 地址 A | 地址 B | 是否跨域 |
|---|---|---|
| http://a.com:8080 | http://a.com:8080 | 否 |
| http://a.com:8080 | http://a.com:3000 | 是（端口不同） |
| http://a.com:8080 | https://a.com:8080 | 是（协议不同） |
| http://a.com:8080 | http://b.com:8080 | 是（域名不同） |
✅ 浏览器报错示例
Access to XMLHttpRequest at 'http://api.example.com/data' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header present on the requested resource.三、开发环境中解决跨域的推荐方式：代理（Proxy）
在 Vue CLI 创建的项目中，我们可以通过配置 代理服务器（Proxy） 来绕过浏览器的同源策略限制。
📌 原理：前端请求本地路径（如
/api/xxx），Vue DevServer 自动将该请求转发到真实后端地址（如http://api.example.com/api/xxx），从而避免了跨域问题。
四、如何配置代理（Vue CLI 项目）
步骤 1：创建 vue.config.js
在项目根目录下创建文件 vue.config.js：
bash
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com', // 后端接口地址
changeOrigin: true, // 是否允许跨域
pathRewrite: {
'^/api': '' // 重写路径，去掉 /api 前缀
}
}
}
}
}步骤 2：使用 Axios 发起请求
bash
// 示例：src/utils/request.js
import axios from 'axios'
const service = axios.create({
baseURL: '/api', // 所有请求都将以 /api 开头
timeout: 5000
})
export default service步骤 3：调用 API 接口
bash
// src/views/HomeView.vue
import request from '@/utils/request'
export default {
mounted() {
request.get('/users').then(res => {
console.log('用户列表:', res.data)
}).catch(err => {
console.error('请求失败:', err)
})
}
}📌 效果说明：
- 你在前端请求
/api/users - 实际请求被 Vue DevServer 代理到
http://api.example.com/api/users - 浏览器看到的是请求本地服务器，不存在跨域问题
五、生产环境如何处理跨域？
开发环境通过代理解决了跨域问题，但 生产环境不能依赖代理机制，需要后端配合设置响应头来支持跨域。
后端需添加的响应头（以 Node.js Express 为例）：
bash
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*') // 允许所有来源访问
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
next()
})📌 或者使用中间件如 cors：
bash
npm install cors
javascript
const cors = require('cors')
app.use(cors())六、常见错误与排查方法
| 错误现象 | 可能原因 | 解决方案 |
|---|---|---|
| 请求未走代理 | 请求路径未匹配 /api |
检查请求路径和代理配置 |
| 404 Not Found | 后端接口路径不对 | 检查 pathRewrite 配置 |
| 端口冲突 | devServer 端口被占用 | 修改 port 属性 |
| 代理未生效 | vue.config.js 语法错误 | 检查 JS 语法是否正确 |
| 无法访问目标服务器 | target 地址不可达 | 检查网络连接或目标服务状态 |
七、其他方式解决跨域（不推荐用于正式项目）
| 方式 | 说明 |
|---|---|
| JSONP | 仅支持 GET 请求，已逐渐淘汰 |
| CORS 插件（如 Allow CORS） | 临时调试可用，不适合正式开发 |
| 后端开启 CORS | 推荐做法，适用于生产环境 |
| 使用 Nginx 反向代理 | 更加稳定，适合上线部署 |
八、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！