JSONP解决跨域问题：原理、实现与局限

一、什么是JSONP？

JSONP（JSON with Padding）是一种早期用于解决跨域请求的前端技术

它通过巧妙地利用浏览器对 <script> 标签的宽松同源策略限制，实现跨域数据获取
JSONP的核心思想是“动态脚本注入”——通过在前端动态创建 <script> 标签，向目标服务器请求数据，并以回调函数的形式处理响应

二、JSONP的工作原理

绕过同源策略

浏览器允许加载来自不同源的<script>标签资源，而不会触发同源策略的限制

JSONP正是利用这一特性，将跨域请求伪装成脚本加载

动态脚本注入

前端预先定义一个全局回调函数（例如 handleResponse）

动态创建<script>标签，将请求的URL指向目标服务器，并在URL中指定回调函数名（如 ?callback=handleResponse）

服务器收到请求后，将数据包裹在回调函数中返回（如 handleResponse({"data": "value"})）

浏览器执行返回的脚本，自动触发回调函数并处理数据

三、实现JSONP的步骤

以下是一个简单的JSONP实现示例

前端代码

function handleResponse(data) {
  console.log("Received data:", data);
}

// 动态创建<script>标签
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器端响应：

服务器需要支持JSONP格式的返回
例如，Node.js的简单实现：

app.get('/data', (req, res) => {
  const callback = req.query.callback;
  const data = { message: 'Hello from JSONP!' };
  res.send(`${callback}(${JSON.stringify(data)})`);
});

四、优缺点

优点：

兼容性极佳：支持所有浏览器（包括老旧浏览器）

无需额外配置：无需服务器支持CORS等复杂协议

缺点：

仅支持GET请求：无法发送POST或其他类型的请求

安全性风险：

容易遭受XSS攻击（若服务器未对回调函数名严格校验）

依赖第三方服务器的可信度（可能返回恶意脚本）

错误处理困难：无法通过HTTP状态码捕获请求失败

五、适用场景

需要兼容老旧浏览器的项目

快速实现简单的跨域数据获取（如加载第三方公共API）

服务器无法配置CORS时的临时解决方案

总结

JSONP作为早期跨域问题的经典解决方案，凭借其简单性和广泛的兼容性，至今仍在某些场景中发挥作用。然而，其局限性（如仅支持GET请求、潜在的安全风险）也促使我们转向更现代的方案（如CORS、代理服务器）

JSONP虽然实现起来较简单，但需谨慎使用！

务必确保请求的服务器可信，并对回调函数名做严格校验，避免安全漏洞