什么是JSONP?什么是CORS?什么是跨域?

一、什么是跨域?

跨域就是跨域名访问

  例:www.jd.com和www.taobao.com   域名不同。

              www.jd.com:8080和www.jd.com:8081  端口号不同。

跨域问题是浏览器对于ajax请求的一种安全限制;

跨域:针对ajax的一种限制。

突破同源策略===跨域

跨域的策略:JSONP 、CORS 、postMessage

二、为什么要跨域?

因为存在同源策略(SOP)

三、什么是同源策略?

同源策略是一种约定,它是浏览器最核心也是最安全的功能。

同源是指域名、端口、协议相同

四、AJAX请求的过程

Ajax会将请求提交给浏览器,浏览器再与服务器通信。

服务器会将结果返回给浏览器,浏览器会判断服务器响应的数据和发出的请求是不是在同一域下,

若果不是浏览器会丢弃响应数据,如果是,浏览器会将结果转交给ajax请求。

五、JSONP  (JSON with padding   )填充式JSON

利用了使用src引用静态资源不受跨域限制的机制。

主要在客户端搞一个回调做一些参数接受与操作的处理,,并把回调函数告知服务器,而服务器做的就是按照javascript的语法把数据放到约定好的回调函数中即可。

例:http://www.jd.com?callback='userinfo'

这个请求到达后端后,后端会解析callback这个参数,获取到字符串userinfo,在发送数据做如下处理:

之前后端返回的数据{"username":"babilong" ,"password":"123456"}

之后后端返回的数据userinfo({"username":"babilong" ,"password":"123456"})

前端script标签加载后会把userinfo({"username":"babilong" ,"password":"123456"})作为js来执行,实际上就是调用userinfo这个函数,同属参数是{"username":"babilong" ,"password":"123456"}

总结:

JSONP是通过标签加载数据,去获取数据当作js代码执行。

提前在页面上申请一个函数,函数名通过接口传参的方式给后台,后台解析到函数名后在原始数据上包裹这个函数名,发送给前端,换句话说,JSONP需要对应接口的后端的配合才能实现。

JSONP优缺点:

JSONP只支持get请求,只发送一个请求,支持低版本的浏览器,不受同域策略的限制,兼容性好。

JSONP使用场景:一些低版本的浏览器,简单的请求。

六、CORS  (Cross-origin-resourse sharing)  跨域资源共享

CORS需要浏览器服务端同时支持才可以跨域。

依附于AJAX,通过添加HTTPHeader部分字段请求去获取有权访问的资源。CORS的整个过程都是由浏览器自动完成的,前端无需任何设置,跟平时发送ajax请求并无差异,所以CORS的关键在于服务端的配置,只要服务端实现CORS接口,就可以实现跨域通信。

CORS请求分为简单请求非简单请求

简单请求:GET  、POST 、HEAD 

Access-Control-Allow-Origin:*  表明资源可以被任何外域访问。

非简单请求:PUT 、DELETE、CONNECT、TRACE、PATCH

发送真正的请求前会发送预检请求,同时携带下面两个首部字段。

Access-Control-Request-Methods:post

Acccess-Control-Request-Headers:x-PINGOTHER

Content-Type:只限于三个值

appkication/x-www-form-unlencoded

multipart/form-data

text/plain

CORS优缺点

支持所有浏览器,IE9以下版本不支持,支持所有的HTTP请求,对于复杂的情况,会发送两次请求。

七、postMessage

window.postMessage(message,targetOrigin)方法是html5新建的特性,可以使用它向其他的window对象发送消息,无论这个window对对象是否属于同源或不同源。

原文地址:https://www.cnblogs.com/babilong/p/13522825.html