按理说，

想要解决跨域问题。要明白“跨域”从何而来，作为前端开发者，你是否曾在控制台看到过类似“Blocked by CORS policy”的报错？这通常代表着你的Web应用遇到了跨域限制。

. 同源策略的定义

浏览器的同源策略 是跨域的主要根源，它是浏览器最主要也最基本的安全功能。简单讲“同源”，要求两个页面的以下三点必须完全相同：

• 协议
• 域名
• 端口号

只要三者有其一不同。就会被判定为“跨域”，此时浏览器会限制非同源页面的以下行为：

• 读取非同源网页的 Cookie、LocalStorage、IndexedDB 等存储数据。
• 获取非同源网页的 DOM 元素。
• 向非同源地址发送 AJAX 请求。

. 为什么需要同源策略？

同源策略就像一道“防火墙”。从根本上限制了恶意网站的非法操作，保障了使用者的信息安全。试想一下如果没有同源策略：

• 恶意网站可以轻易读取你网银页面的 Cookie，盗取账户信息。老实说，
• 钓鱼网站可以嵌入真实的电商页面篡改支付金额。
• 任意网站都能向你的服务器发送伪造请求，发起 CSRF 攻击。其实，

. 跨域的常见场景

日常开发中。跨域几乎无处不在：

• 前后端分离项目前端运行在 localhost:后端接口在 localhost:。老实说，你可能会遇到接口调用失败的问题。
• 调用第三方接口如支付、地图、天气等第三方服务。你需要处理跨域请求以获取数据。说起来，
• 多端协作公司内部不同部门的程序对接。这在公司级应用中尤为常见。

二、方案 ：JSONP——兼容性拉满的“老古董”

JSONP是跨域方案中的“老前辈”。也是早期前端解决跨域最常用的方式，最大的优势是浏览器兼容性极好。

. JSONP 的主要原理及痛点解决

JSONP 正是利用