接口联调最常遇到的就是跨域报错！
今天一次性讲透：是什么、为什么、3种最常用解决方案✅
跨域原理示意图｜同源策略：协议+域名+端口必须一致
什么是跨域？
浏览器出于安全，限制了「同源策略」
只要 协议、域名、端口 有一个不一样，就是跨域。
举例子
- •
http://a.com→http://a.com同源 ✅ - •
http://a.com→https://a.com跨域 ❌（协议不同） - •
http://a.com→http://b.a.com跨域 ❌（域名不同） - •
http://a.com:80→http://a.com:8080跨域 ❌（端口不同）
专业解释：
跨域是浏览器的安全限制，不是后端报错，也不是代码错。
前端最常用 3 种跨域解决方案
1. CORS（跨域资源共享）
最标准、最常用、生产环境首选
- • 后端在响应头加配置
- • 前端无需改代码
- • 支持所有请求类型
例子
后端返回头：
Access-Control-Allow-Origin: *
优点：简单、安全、规范
缺点：需要后端配合
2. 代理服务器（Proxy）
开发环境 100% 会用
- • 前端启动本地代理
- • 请求 → 代理 → 后端
- • 浏览器看不到跨域
例子
vue.config.js / vite.config 配置代理
proxy: {
'/api': {
target: 'http://localhost:3000'
}
}优点：开发极方便
缺点：只适合开发环境
3. JSONP
早期方案，现在很少用
- • 利用
<script>不受跨域限制 - • 只支持 GET 请求
优点：兼容老浏览器
缺点：只能GET、不安全、不推荐
3种方案快速对比
| 方案 | 用法 | 优点 | 缺点 |
|---|---|---|---|
| CORS | 后端配置 | 标准、安全、全支持 | 需要后端配合 |
| Proxy | 前端代理 | 开发神器 | 仅开发环境 |
| JSONP | script标签 | 兼容老浏览器 | 只支持GET |
三种跨域方案对比表格
深挖三层（面试官加分点）
- 1. 跨域是谁限制的？
浏览器！服务器之间没有跨域！ - 2. 为什么要有跨域？
防止Cookie被盗、防止接口被恶意调用（安全机制） - 3. CORS 简单请求 vs 复杂请求
普通请求直接过
带Header/PUT/DELETE 会先发 OPTIONS 预检请求
10秒速记
✅ 跨域 = 协议/域名/端口不一致
✅ 浏览器安全限制
✅ 3种方案：
CORS（生产）、Proxy（开发）、JSONP（废弃）
