用CORS和JSONP解决跨域问题

• 为什么会有跨域问题？
  因为浏览器的同源策略
• 同源策略是什么？
  协议，域名，端口都相同
• 如果非同源，会受到什么限制？
  （1） Cookie、LocalStorage 和 IndexDB 无法读取
  （2） DOM 无法获得
  （3） AJAX 请求不能发送

怎样解决非同源发送请求，也就是跨域问题呢，有以下几种方法

CORS

• 客户端可以使用XMLHttpRequest发送请求，请求路径为绝对路径，服务端返回的数据在xhr.responseText中
• 如果服务器认为可以接受，就在Access-Control-Allow-Origin中返回相应的源或 *
• 克服了AJAX只能同源使用的限制

res.header("Access-Control-Allow-Origin", "*");

JSONP

• 通过使用动态<script>实现跨域，在url中指定回调函数
• 能直接访问响应文本，支持浏览器和服务器的双向通信

script.src = "http://www.baidu.com/?callback=handleResponse"
function handleResponse(res){
  //res是服务端返回的数据
}

类似的还有 图像Ping，因为一个网页可以从任何网页中加载图片，不用担心跨域问题，所以，凡是拥有src这个属性的标签都拥有跨域的能力，缺点是无法访问响应文本，适用于浏览器和服务器间的单向通信

let img = new Image();
img.src = "http://"

两者的区别

• JSONP是Jquery提供的跨域方式，JSONP只支持get方式的请求
• CORS是W3C提供的一个跨域标准 ，CORS支持所有类型的http请求

demo地址