什么是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对对象是否属于同源或不同源。