跨域：浏览器里的“小区门禁”与前端汪的突围指南-CSDN博客

跨域：浏览器里的“小区门禁”与前端汪的突围指南

各位程序大侠，今天咱们聊聊开发中那个让人又爱又恨的“跨域”问题——它就像小区里最严格的保安，总把你拦在门外喊：“你不是本小区的！禁止入内！” 😤

第一章：什么是跨域？为什么保安这么严格？

想象一下：你（前端代码）住在 https://fe.com 小区，想去 https://api.com 小区串门拿数据。刚走到门口，浏览器保安一把拦住：“站住！查户口！”

同源策略（Same-Origin Policy）就是这位保安：

必须 协议相同（http/https）
域名相同（api.fe.com ≠ fe.com）
端口相同（:8080 ≠ :3000）

为何这么严？防“数据小偷”！比如恶意网站偷偷读取你的银行页面。

第二章：经典跨域车祸现场

// 前端代码（跑在 http://localhost:3000）
fetch("http://api.com/user")
  .then(response => response.json())
  .then(data => console.log(data));

// 控制台怒吼：
// Access to fetch at 'http://api.com/user' from origin 'http://localhost:3000' 
// has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...

在这里插入图片描述

第三章：六大“通行证”申请指南

方案1：CORS（官方认证VIP卡）🌟

原理：让后端在响应头盖个章：“此人可进！”

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000  // 或直接写 *（谨慎使用！）
Access-Control-Allow-Methods: GET, POST, PUT        // 允许的HTTP方法

在这里插入图片描述

注意：非简单请求（如带自定义头）会先发 OPTIONS 预检请求——相当于保安先打电话问业主：“有人找你，放不放？”

方案2：JSONP（钻狗洞的古老智慧）🕳️

原理：利用 <script> 标签无视跨域的特性，像这样：

<script>
function handleData(data) {
  console.log("偷渡成功:", data); 
}
</script>
<script src="http://api.com/user?callback=handleData"></script>

后端返回：handleData({name: "Doge", age: 3})

⚠️ 缺点：只支持GET、错误处理难、有安全风险（相当于告诉小偷：“我家狗洞在哪儿”）。

方案3：代理服务器（请中介代跑腿）🏃

原理：让同域的服务端帮忙转发请求：

浏览器 → 同域代理服务器 → 目标API → 代理 → 浏览器

Nginx配置示例：

location /api {
  proxy_pass http://api.com;  # 悄悄转发请求
}

其他方案速览：

方案	适用场景	吐槽点
WebSocket	实时通信	协议不同？不存在的！
postMessage	窗口间通信（iframe好基友）	“兄弟，接数据！”
改浏览器启动参数	本地开发（–disable-web-security）	相当于把保安灌醉 🍺