跨域安全防护，这玩意儿你搞明白没？

说实话，每次聊到跨域，后台开发兄弟们的表情就跟便秘似的，又难搞又绕不开。前端同学呢，动不动就报个CORS错误，红彤彤一片，血压直接拉满。这事儿吧，说复杂是真复杂，各种协议、头信息、策略搅和在一起；但说简单也简单，说白了就是一套“浏览器保安”定的规矩，防止你家网页随便去别人家串门、拿东西。

一、跨域这堵墙，到底谁砌的？

你有没有发现，你写个本地HTML，用JS去请求一个公开的API，浏览器立马就给你掐了，告诉你“跨域了”。其实不是服务器不给你数据，很多时候服务器已经响应了，是浏览器这个多管闲事的保安，出于安全考虑，把响应给拦下来了。

浏览器遵循的是“同源策略”。什么叫同源？协议、域名、端口，仨兄弟必须一模一样。就像你进自家小区，门禁卡（协议）、楼栋号（域名）、单元号（端口）都对上了，保安才放行。差一个，你就是“跨域访客”，得按流程登记（预检请求）。

二、搞定保安的三大法宝

别慌，想让数据顺利通行，我们有招儿。不过得先摸清保安的脾气。

1. CORS：最正经的“访客登记”流程

这是现代Web开发的主流方案，需要前后端配合。后端在响应头里加几个“通行证”，告诉浏览器：“这哥们我认识，放行！”

关键就在这几个响应头上：

• `Access-Control-Allow-Origin`：最重要！指定允许访问的来源。可以是具体的域名，比如 `https://your-site.com`，或者图省事用星号 ``（但注意，用星号时不能携带凭证信息，比如Cookie）。
• `Access-Control-Allow-Methods`：允许的HTTP方法，比如 `GET, POST, PUT`。
• `Access-Control-Allow-Headers`：允许客户端携带的额外头信息。

代码长这样，以Node.js为例：

``` app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'https://trusted-client.com'); // 别用，不安全 res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); if (req.method === 'OPTIONS') { return res.sendStatus(200); // 对预检请求快速响应 } next(); }); ```

看到那个`OPTIONS`请求了吗？那就是复杂请求（比如要带自定义头、或者用PUT方法）之前，浏览器派来“探路”的预检请求。后端必须正确处理它，不然真正的请求根本发不出来。

2. JSONP：老派但管用的“暗号接头”

这方法有点古老，但对付只支持GET的老接口，或者一些特殊场景还挺好使。它利用了`