深入浅析Jsonp解决ajax跨域问题

一、介绍 最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份，关键是我还看不懂，可能是能力问题吧，自己经过很多尝试，所以总结了一下，终究还是弄懂了皮毛。注意一点是，这里是用Jsonp解决ajax的跨域问题，具体的实现其实不是ajax。 1、同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(JavaScript、ActionScript)在没明确授权的情况下，不能读写对方的资源。 2、JSONP JSONP（JSON with Padding）是一种跨域数据交互协议，它允许网页从其他源获取数据，规避浏览器的同源策略限制。同源策略是浏览器为了安全考虑实施的一项策略，规定了只有域名、协议和端口完全相同的两个页面才能互相通信。但JSONP利用了HTML `<script>` 标签不受同源策略限制的特性，来实现跨域数据的请求和接收。 在JSONP的工作机制中，客户端（通常是JavaScript）创建一个`<script>`标签，将目标服务器返回的JavaScript代码作为src属性的值。服务器端则需要根据客户端传递的回调函数名，将数据封装在该函数调用中返回。例如，客户端定义了一个函数`jsonp_fun`，并发送请求时告诉服务器这个函数名。服务器返回的JavaScript代码可能类似于`jsonp_fun({"key": "value", "anotherKey": "anotherValue"})`。当这个脚本被浏览器加载并执行时，实际上就调用了客户端预先定义好的`jsonp_fun`函数，并将数据作为参数传入，从而实现了跨域数据交换。 在实际应用中，如描述中的例子所示，我们可以通过模拟两个不同的Web服务器（分别运行在8080和8888端口上）来演示JSONP的实现。在8080端口的服务器上，我们有一个页面（jsonp项目）通过jQuery的`$.ajax`方法发送请求，请求类型为POST，数据类型设置为text，期望接收到的是一个能够被执行的JavaScript代码。请求的目标是8888端口上的服务器（other项目），该服务器需要响应一个包含JSON数据的JavaScript函数调用。 然而，由于同源策略的限制，浏览器会阻止这种跨域请求。在示例中，Chrome控制台会显示出错误信息，提示没有`Access-Control-Allow-Origin`头部，这表明8888端口的服务器没有允许8080端口的源进行访问。如果要在服务器端启用跨域，通常需要在HTTP响应头中添加`Access-Control-Allow-Origin`字段，并指定允许的源。 为了使JSONP工作，8888端口的服务器需要接收请求中的回调函数名，然后在返回的响应中生成一个包裹了数据的JavaScript函数调用，格式如`jsonp_callback({data: 'your_data'})`。客户端的`jsonp_fun`函数需要定义为接收这种格式的参数，这样当浏览器执行返回的脚本时，就能正确处理并解码跨域返回的数据。 JSONP是一种解决跨域问题的常用技术，尤其适用于旧版浏览器，因为它们不支持CORS（跨源资源共享）。不过，相比CORS，JSONP有一些限制，比如只支持GET请求，且无法处理HTTP错误状态。尽管如此，JSONP仍然是前端开发中不可或缺的工具，尤其在与API接口交互时，能帮助我们绕过同源策略的障碍，实现数据的顺利获取。