kaiyun登录官网

在前端竖立中，不竭会碰到一个问题：跨域恳求。

比如，你的网页在 https://example.com，念念恳求 https://api.other.com/data 的数据，平直用 XMLHttpRequest 或 fetch 会报错：“跨域恳求被谢绝”。

这时代，有一个迂腐但经典的责罚决策——JSONP（JSON with Padding），诚然当代更多东说念主用 CORS，但解析 JSONP 的旨趣对入门者掌持跨域知知趣称有匡助。

一、为什么会有跨域问题？

浏览器的同源政策（Same-Origin Policy）门径：

公约、域名、端口必须皆同样，网页才略解放访谒接口数据

不安妥条目就算跨域。

页面 URL：https://example.com恳求接口：https://api.other.com/data → 不同域名 → 跨域

跨域放浪是浏览器为了安全，防患坏心网站窃取数据。

二、JSONP的中枢旨趣

JSONP的旨趣很奥妙：哄骗 <script> 标签不受跨域放浪的特质。

<script src="..."></script> 不错加载大肆域名的剧本。后端复返一段 函数调用代码，把数据看成参数传入。浏览器推行这段代码，就能得到数据。

默示图：

三、JSONP恳求的要领

1. 前端：动态创建 <script> 标签

2. 后端：复返 JavaScript 函数调用

假定接口复返的数据是：

浏览器推行时，handleData 函数被调用，数据就得手了。

四、JSONP的优舛错

优点

跨域智商强：撑持悉数域，不受浏览器放浪。简便已毕：前端只需动态创建 <script>，后端包装数据即可。

舛错

只撑持 GET 恳求：弗成用 POST。安全性低：复返的是可推行代码，容易被注入坏心剧本。回调函数束缚复杂：多个 JSONP 恳求可能突破，需要动态生成回调名。

五、当代替代决策

CORS（Cross-Origin Resource Sharing）：后端通过反馈头允许跨域访谒，撑持 GET、POST 等恳求。代理办事器：通过同源办事器转发恳求，前端仍然是同源。

诚然 JSONP 是“老本事”，但学习它能帮你解析 浏览器同源政策、跨域放浪以及动态剧本加载旨趣。

六、追念

JSONP 哄骗 <script> 标签跨域智商已毕数据恳求。前端提供回调函数，后端复返调用该函数的数据。当代竖立中，JSONP 缓缓被 CORS 或代理替代，但解析旨趣仍很有价值。

💡一句话追念：JSONP = 哄骗剧本跨域加载 + 回调函数得到数据的“迂腐奥妙决策”开云kaiyun官方网站