跨域请求之JSONP 和CORS

JSONP

JSON with padding ,是一种借助于script 标签发送跨域请求的技巧。
其原理就是在客户端接住 script 标签请求服务端的一个动态网页（PHP文件），服务端的这个动态网页返回一段带有函数调用的JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。
客户端 https://blog.csdn.net/KleyChan/users-list.html

原生代码：

封装函数代码：

// 函数调用
jsonp ('https://blog.csdn.net/KleyChan/users.php',
        {id: 1111},function(res){
        	console.log(res);
        })

jQuery 也把jsonp封装成函数：

服务端https://blog.csdn.net/KleyChan/users.php?callback=foo 返回结果

foo（['我','是','数据']）

总结：
由于XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方案就是我们最终选择的方式，我们把这种方式称之为JSONP ，如果你不了解原路，先记住怎么用，多用一段时间再来看原理。
问题：

1. JSONP 需要服务端的配合，服务端按照客服端的要求返回一段JavaScript 调用客户端的函数
2. 只能发送GET 请求
3. 注意JSONP 用的是script 标签，跟AJAX 提供的XMLHttpRequest 没有任何关系！！！

jQuery 中使用JSONP 就是将dataType 设置为jsonp。

CORS

Cross Origin Resource Share, 跨域资源共享

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

在php中，通过下面代码给客户端设置一个响应头，浏览器响应时就会知道允许跨域了

// 允许所有网站跨域访问该网站
header('Access-Control-Allow-Origin: *')
//只允许某个地址（百度


）跨域访问该网站
header( 'Access-Control-Allow-Origin:http://baidu.com' )

这种方案无需客户端做出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。

jsonp方式和cors方式的区别

• jsonp是jquery提供的跨域方式
• cors是w3c提供的一个跨域标准

——————————————————————

• jsonp只支持get方式的跨域
• cors支持get和post方式的跨域

——————————————————————

• jsonp支持所有的浏览器（因为所有浏览器都可以使用script标签发送请求）
• cors不支持IE10以下的浏览器

尽管这两种跨域方法可以解决跨域的问题，但两者的缺点都是非常依赖服务端的操作。