526互联

前端跨域解决方案——JSONP

发布时间 2023-04-20 09:48:15作者: 1800000000nm

JSONP（JSON with Padding）是一种跨域请求的解决方案，它允许在不受同源策略限制的情况下从一个域中向另一个域中请求数据。

JSONP的基本原理是利用 <script> 标签的 src 属性没有跨域限制的特性来实现跨域数据访问。
在使用JSONP时，需要在客户端创建一个 script 标签，将需要访问的资源URL以参数形式传递给服务器，服务器在接收到请求后，将数据装入一个函数调用中返回给客户端，这个函数就是在客户端预先定义好的回调函数。



下面是一个JSONP的例子：

客户端代码：

function handleResponse(response) {
  //处理服务器返回的数据
}

var script = document.createElement('script');
script.src = 'https://jsonp.com/data?callback=handleResponse';
document.body.appendChild(script);

 

服务端代码：

var data = { name: 'John', age: 30 };
var jsonpResponse = 'handleResponse(' + JSON.stringify(data) + ');';
res.send(jsonpResponse);

 

在这个例子中，客户端代码中创建了一个 script 标签，将需要访问的资源URL传递给服务器，并指定了回调函数的名称为 handleResponse 。服务器在接收到请求后，将数据装入一个函数调用中返回给客户端，函数名为 handleResponse ，实际上是在客户端预先定义好的回调函数。

 


除了上面的示例，以下是一个更完整的JSONP示例，它演示了如何使用jQuery来进行JSONP请求：

$.ajax({
  url: "http://example.com/api",
  dataType: "jsonp",
  data: {
    name: "John",
    age: 30
  },
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

 

在这个例子中，我们使用jQuery的 $.ajax 方法来进行JSONP请求。其中， url 参数指定要请求的URL， dataType 参数指定要使用的数据类型， data 参数指定要发送的数据。如果服务器成功响应了请求， success 回调函数会被调用并传递响应数据作为参数。如果请求失败， error 回调函数会被调用并传递错误信息作为参数。

 


以下是一些关于JSONP的补充：

1. JSONP只支持 GET 请求，不支持 POST 等其他HTTP方法。
2. 因为JSONP请求是通过动态创建 script 标签实现的，所以需要确保被请求的数据源返回的是JSONP格式的数据，而不是普通的JSON格式，否则在处理时会出现语法错误。
3. 在服务端处理JSONP请求时，需要解析 callback 参数的值，并将数据包装在该函数的调用中返回，例如：

handleData({"name": "John", "age": 30});

4. 在客户端处理返回的数据时，需要确保回调函数的名字与请求时设置的 callback 参数的值相同。
5. 由于JSONP请求是通过 script 标签实现的，所以无法在请求时设置请求头（例如Content-Type），也无法获取响应头（例如Cookie），这是JSONP与XHR等其他跨域请求方式的一个区别。



还有一些关于JSONP的注意事项：

1. JSONP存在一定的安全风险，因为返回的数据可以被任意JavaScript代码调用和处理，可能会导致跨站脚本攻击（XSS）等安全问题。因此，在使用JSONP时需要确保请求的数据源是可信的，并且返回的数据不包含恶意代码。
2. 在使用JSONP时，如果服务器端返回的数据量过大，可能会导致浏览器卡顿或崩溃。因此，需要在服务器端对返回的数据进行压缩或分页处理，以确保数据量在合理范围内。
3. 在使用JSONP时，需要注意兼容性问题。虽然JSONP是一种较为通用的跨域请求方案，但在一些较老的浏览器（例如IE6）中可能存在兼容问题，当然，微软现在都抛弃IE了（笑）。因此，在使用JSONP时需要进行兼容性测试，并根据具体情况选择其他跨域请求方式（例如CORS）。
4. 最后需要注意的是，由于JSONP的实现方式与普通的XHR请求不同，因此无法使用XHR提供的一些高级特性（例如上传文件、获取进度等）。



总的来说，JSONP是一种简单而有效的跨域请求解决方案，但由于其存在一些局限性（例如只支持GET请求，无法设置请求头和获取响应头等），所以在实际应用中需要根据具体情况进行选择。现在，跨域资源共享（CORS）已经成为跨域请求的主流方法，大多数现代浏览器都支持 CORS。在可行的情况下，建议优先使用 CORS 而不是 JSONP。本文只是为了介绍一下曾经常用的一种跨域解决方法。