详解 JSONP跨域请求的实现

时间:2023-03-08 23:09:26
详解 JSONP跨域请求的实现

      跨域问题是由于浏览器为了防止CSRF攻击(Cross-site request forgery跨站请求伪造),避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest(XHR请求)对象发送HTTP请求时,必须保证当前页面和请求的对象是同源的,即协议、域名和端口号要完全一致,否则浏览器就会阻止此跨域请求返回的数据。

详解 JSONP跨域请求的实现

例如:

http://www.a.com 与 https://www.a.com 是不同源的,它们协议不同

http://www.a.com 与 http://www.b.com 是不同源的,它们域名不同

http://www.a.com:80 与 http://www.a.com:8080 是不同源的,它们端口号不同

http://www.a.com/test1.js 与 http://www.a.com/test2.js 是同源的

跨域请求的解决方案

虽然同源限制可以有效的防止网络上的恶意攻击,但是在实际开发应用中,我们往往需要从本站点向第三方站点发送XHR请求,这就需要有效的解决跨域问题,可以有以下几种:

(1)JSONP:只支持GET,不支持POST请求代理:使用代理去避开跨域请求,例如www.a.com/index.html页面去调用www.b.com/service.jsp,可以通过写一个接口www.a.com/service.jsp,由这个接口在后端去调用www.b.com/service.jsp并取到返回值,然后再返回给index.html。

(2)服务端修改:例如在服务端页面添加header限制:

header('Access-Control-Allow-Origin:*'); //允许所有来源访问

header('Access-Control-Allow-Method:POST,GET'); // 允许访问的方式

由于JSONP是最灵活,也是最常用的方式,这里主要讲解JSONP方式解决跨域问题。

 JSONP原理

浏览器只对XHR(XMLHttpRequest)请求有同源请求限制,而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制,利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的,当向第三方站点请求时,我们可以将此请求放在<script>标签的src属性里,这就如同我们请求一个普通的JS脚本,可以*的向不同的站点请求:

<script src="http://www.b.com/request?para1=1"></script>

JSONP请求实现

(1)Javascript实现

服务端:

前端:

(2)JQuery实现

JQuery的ajax方法对JSONP方法进行了封装,使用JQuery提供的方法变得非常简单

前端: