在前端开发中，经常会遇到一个问题：跨域请求。
比如，你的网页在 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 = 利用脚本跨域加载 + 回调函数获取数据的“古老巧妙方案”
景盛配资提示：文章来自网络，不代表本站观点。
